In flutter we would use Widget keyword along with widget name to create custom widgets. Flutter gives us functionality to make designing easier using custom widgets. Using custom widgets we can easily existing widgets and also make new widgets by modifying current widgets. Custom widgets has return area which would return us complete widget pass in it. Widget is the center of development in flutter framework. So in this tutorial we would Flutter Create Custom New Widget in Android iOS Example Tutorial.
Contents in this project Flutter Create Custom New Widget in Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would pass our main MyApp class. This class is our main screen class in current tutorial.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a Custom widget named as customTextWidget() with 4 different properties. This is our custom widget. In this widget we would requiring 4 values from user at widget calling time.
- text : Text used to print on screen in Text widget.
- Color : Text Color pass by user to set Text color.
- fONTSize : Require double value to set Text font size.
- fONTStyle : Used to set font style like bold or Italic.;
|
1 2 3 4 5 6 7 |
Widget customTextWidget(var text, Color color, double fONTSize, FontStyle fONTStyle) { return Text(text, style: TextStyle(color: color, fontSize: fONTSize, fontStyle: fONTStyle )); } |
5. Create Widget Build area in MyApp. Now we would make the Scaffold widget -> Center widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment : MainAxisAlignment.center, children: [ ]) ), ) ); } |
6. Now we would call our custom widget customTextWidget() with all 4 parameter values.
|
1 2 3 4 5 6 7 |
customTextWidget('Hello Guys', Colors.green, 40, FontStyle.italic), customTextWidget('Welcome', Colors.pink, 40, FontStyle.italic), customTextWidget('To', Colors.blue, 40, FontStyle.italic), customTextWidget('Flutter-Examples.com', Colors.orange, 40, FontStyle.normal), |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Widget customTextWidget(var text, Color color, double fONTSize, FontStyle fONTStyle) { return Text(text, style: TextStyle(color: color, fontSize: fONTSize, fontStyle: fONTStyle )); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment : MainAxisAlignment.center, children: [ customTextWidget('Hello Guys', Colors.green, 40, FontStyle.italic), customTextWidget('Welcome', Colors.pink, 40, FontStyle.italic), customTextWidget('To', Colors.blue, 40, FontStyle.italic), customTextWidget('Flutter-Examples.com', Colors.orange, 40, FontStyle.normal), ]) ), ) ); } } |
Screenshot:
there is one text widget on each screen, let’s call it “title”, while it has a different color on the screens, how to make it reusable with its own styles that look like this
/// Headline 1 Bold White
static final TextStyle headline1White = TextStyle(
fontFamily: Assets.fonts.gilroyBold,
fontSize: 24,
height: 32 / 24,
fontWeight: FontWeight.w700,
color: AppColors.textFFFFFF,
);
/// Headline 1 Bold Pink
static final TextStyle headline1Pink = TextStyle(
fontFamily: Assets.fonts.gilroyBold,
fontSize: 24,
height: 32 / 24,
fontWeight: FontWeight.w700,
color: AppColors.textFF3C60,
);