Section 4: Flutter Custom Widgets

To prevent redundant code, it is important to understand that we can use custom widgets. We can use it to even theme our app, e.g., reuse a button in your entire application.

In our previous tutorial, we had redundant InkWell in *intro.dart. Let us create a custom widget to prevent this.

Create a new folder in the *lib folder and call it widgets. In this folder, we shall create a file and call it *intro_card.dart. So, it is basically a new class with the InkWell we duplicated, but with custom fields. These fields are the ones you change inside each widget whenever you call it in your main UI.

Notice where the fields are and the way we have called them in the UI. We will be able to change them after calling this class. e.g., onClick will lead to different screens, img, will be showcasing different images, and cardTitle will be showcasing different text. Now, modify your intro.dart by deleting the InkWells and replacing them with the following code:

Your code should work the same! Prepare to be using custom widgets from now on.