Flutter Reusable Custom Widget | Visual Studio Code | Dart Tutorial

in the last video we learned about creating a new project using visual studio code we explored creating an app bar setting its background color and creating a new text widget with customized styling in this video our Focus will be on creating a new custom widget and ensuring its reusability first we wrap the text widget with a container Widget the container widget is a rectangular box that can be customized with properties such as color alignment padding margin border and more after wrapping the text widget we encountered an error we need to remove the const keyword from this context then we add a color property to the container and refresh the app container and text widget on now displayed correctly next we'll combine these widgets into a single custom widget to do this we create a new class below this code when typing EST flutter provides some suggestions and we select the flutter stateless widget we'll focus Fus on stateful widgets in later tutorials give a name to our custom widget in the Constructor we also Chang the name we'll cover the use of the Constructor in a couple of minutes for now let's cut the container and text widget part and paste it into the custom widgets return statement next copy the custom widget's name and paste it into the main function remember the parentheses are necessary finally run the app same display as seen earlier but now we're using it as a custom widget next we'll learn how to make this custom widget reusable throughout our projects first we'll make the container color Dynamic and also allow the text and its color to be changeable for different uses to achieve this we'll declare three variables let's start by declaring a string variable for the text value if you need help with declaring variables I've done another video in the dart Language tutorial section where I explain this process use the text variable in place of the hardcoded text next create a color type variable for the container color and replace the hard-coded color value with this variable similarly create another variable for the text color then pass these variables in the Constructor using named parameters enclosed in curly brackets mark them as required so that these parameters must be provided finally use this. text variable to set the text value e then pass the container color and text color variables along with the text variable when calling the widget in the place where you call the widget you can add the required arguments manually or use the suggestions provided first add the required argument for text then the container color and finally the text color pass any text for displaying along with a color for the container and another color for the text e finally run the app to see the changes it is possible to call the custom widget multiple times in this file to do this we wrap the custom widget with a column widget for using multiple widgets inside the column widget we use the children parameter to add many widgets we separate each widget with a comma we can copy our custom widget and use it with another text and different colors after pasting below the first widget and adding a comma we change the text accordingly then change the container color and text color for the second custom widget as desired after making these changes run the app again both custom widgets will be displayed with the updated colors by adding a column property for alignment such as main AIS alignment. Center the widgets will align in the center if any changes are needed they can be made once in the custom widget for example changing the font size will apply to all instances of the widget perfect then we make this custom widget more reusable and usable in any part of the process project for that we create a new dart file in the lip folder give a name to the file and then cut our custom widget and paste it into the new file we need to import the material doart package then we need to import our new file into the main file to resolve these errors save the files now we can use our custom widget in any part of the project by simply importing the new file run the app to confirm that we get the same result great in the next video we'll dive into creating buttons and handling their events this will allow us to add interactivity to our app enabling users to interact with the UI elements we've created so far looking forward to it thank you for watching

Channel: True Coders

Views: 818

Keywords: create widgets, create flutter widget, create cuson dart widget

Id: aJJvwnlb6mE

Length: 12min 55sec (775 seconds)

Published: Wed May 15 2024