Flutter Widgets

Flutter framework is full of widgets, which means everything is widgets in Flutter.

Widgets describe what will be the UI and state of the app.  There are some useful Flutter Widgets.

  • Text widgets are used for displaying text and for the styled view inside the app. for styling the text we use the style property and style property further call TextStyle widgets for taking the style parameters.

Example:
Text('Hello World',
style:TextStyle(
fontSize:20,
color:Colors.blue,
),
),

  • Image Widgets: We use Image widgets for displaying images in the app and this widget requires a property called image.

Inside this image property, we use AssetImage and NetworkImage widgets for displaying Assets Image and Network image.

Example:

Image(image: AssetImage('graphics/background.png'));

For Asset Image we have to declare path of the file inside the puspec.yml

as-
flutter:
assets:
- graphics/background.png

and For Network Image

Image(image: NetworkImage('https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png'));

  • Row Widget: These widgets are used for displaying data in a row.

Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Image.asset('images/pic1.jpg'),
),
Expanded(

child: Image.asset('images/pic2.jpg'),
),
Expanded(
child: Image.asset('images/pic3.jpg'),
),
],
);

Flutter Widgets

  • Column Widget: Column widget is used for displaying data into the column.

Column(
children: [
Text("Text Line 1"),
Text("Text Line 2"),
Text("Text Line 3"),
]
);

  • RaisedButton: RaisedButton is used for onClick function.

RaisedButton(
onPressed:null,
child: Text(
'Click Me',
style: TextStyle(fontSize:20),
),
),

 

Content Protection by DMCA.com
Spread the love

Leave a Comment