How To Create Custom Widget In Flutter

Image From https://glints.com/id/lowongan/flutter-adalah/

After we understand the commonly used flutter widget in UI Development, Now we will learn how to create your own custom widget that can be used in any of your future flutter projects.

When we develop flutter apps, we will often create Custom Widget that will be used when creating widgets that will be used many times, for example, in the list menu.

How To Create Custom Widget

• Create New Flutter Project
• Create a New dart file inside the lib folder and name it custom_widget.dart

Photos From Author

• Delete the MyHomePage widget in main.dart and create a new empty MyHomePageWidget

Photos From Author

• For Example, we will make a custom list menu that if pressed will redirect to another web page
• In custom_widget.dart we will create Custom Widget and name it CustomWidget. CustomWidget extends the stateless widget and will return Text Button that will redirect to the custom URL

Photos From Author

• In main. dart we will create multiple CustomWidget for Google, Facebook, and Twitter.

Photos From Author

Photos From Author

References

• flutter docs: https://docs.flutter.dev/