Flutter Widgets:

Each element on the Flutter UI is a widget such as text, container, image,

button, animations, and motions. So, the view of a screen completely depends
on the choice and the sequence of the Flutter widgets used in building the
application. Therefore the structure formed by the application code is called a
tree of widgets.
These widgets can be classified into the following fourteen
categories according to the functionality they provide in the Flutter application.
‍

Category Description

Accessibility Makes the app more accessible.

Animation and motions Add animation to the widgets.

Assets image and icon Manage assets, display images, and show icons.
Async Provides async functionality to the Flutter application.
Basics Essential widgets for the Flutter application development.
Cupertino Beautiful and high-fidelity widgets for iOS styling.
Take user input in addition to input widgets in Material
Input
Components and Cupertino.
Interaction Models Respond to touch events and route users to different views.
Arranges other widgets, columns, rows, grids, and other
Layout
layouts.
Visual, behavioral, and motion-rich widgets that follow
Material Components
material design guidelines.
Set of widgets that add visual changes to their child widgets
Painting and Effects
without changing their layout and shape.
Scrolling Scrolls multiple widgets as the children of the parents.
Styling It deals with the theme, responsiveness, and sizing of the app.
Text It displays and styles text.
‍
Flutter Widget types
In general Flutter widgets are classified into two categories,
1. Stateless Widget
2. Stateful Widget
However, you can find more classes in the hierarchy of Flutter sources.

 StatelessWidget: The widget does not require a mutable state.

 StatefulWidget: The widget has a mutable state i.e state information can
be read synchronously when it is built and it may change during the
widget's lifetime. Therefore it's essential to ensure that the state is
promptly notified when the change occurs using setState.
 ProxyWidget: The Widget has a child widget provided to it, instead of
building a new widget. It is useful as a base class for other widgets
like InheritedWidget and ParentDataWidget.
 RenderObjectWidget: It provides the configuration for
the RenderObjectElements, which wrap RenderObjects, that provide the
actual rendering of the application.
 InheritedWidget: It is a base class for widgets that efficiently propagates
information down the tree. To obtain the near instance of a particular type
of inherited widget from a build context,
use BuildContext.dependOnInheritedWidgetOfExactType.
  When referenced in this way, it causes the consumer to rebuild when the
inherited widget itself changes state.
 ParentDataWidget: It is a base class for a widget that
hooks ParentData information to children of RenderObjectWidgets. It is
used to provide a per-child configuration for RenderObjectWidgets with
more than one child.
 LeafRenderObjectWidget: It is a superclass
for RenderObjectWidgets that configure RenderObject subclasses that
have no children.
 SingleChildRenderObjectWidget: It is a superclass
for RenderObjectWidgets that configure RenderObject subclasses that
have a single child slot.
 MultiChildRenderObjetWidget: It is a superclass
for RenderObjectWidgets that configure RenderObject subclasses that
have a single list of children.
 _NullWidget: Zero cost widget. Use it when you need a placeholder.
‍
Most commonly used Flutter Widgets with the example
1. Appbar
A Material Design app bar. An app bar consists of a toolbar and potentially
other widgets, such as a TabBar and a FlexibleSpaceBar.
Example:
import 'package:flutter/material.dart';
void main() {
runApp(gfgApp()); //MaterialApp
}
5 MaterialApp gfgApp() {
6 return MaterialApp(
7 home: Scaffold(
8 appBar: AppBar(
9 title: const Text('My demo app'),
10 ), //AppBar
11 body: const Center(
12 child: Text(
13 'Hello Geeks',
14 style: TextStyle(fontSize: 24),
15 ), //Text
16 ), // center
17 ), //Scaffold
18 debugShowCheckedModeBanner: false, //Removing Debug Banner
19 );
20 }
Output:
‍
2. Column
Layout a list of child widgets in the vertical direction.
Example:
1 import 'package:flutter/material.dart';
4 //function to trigger build
5 void main() {
6 runApp(const MyApp());
7 }
10 class MyApp extends StatelessWidget {
11 const MyApp({Key? key}) : super(key: key);
14 @override
15 Widget build(BuildContext context) {
16 return MaterialApp(
17 title: 'My Demo App',
18 theme: ThemeData(
19 primarySwatch: Colors.blue,
20 ), // ThemeData
21 home: const MyHomePage(),
22 debugShowCheckedModeBanner: false,
23 ); // MaterialApp
24 }
25 }
28 class MyHomePage extends StatefulWidget {
29 const MyHomePage({Key? key}) : super(key: key);
32 @override
33 // ignore: library_private_types_in_public_api
34 _MyHomePageState createState() => _MyHomePageState();
35 }
38 class _MyHomePageState extends State
Output:

‍
3. Container
A convenience widget that combines common painting, positioning, and sizing
widgets.
Example:
1 import 'package:flutter/material.dart';
3 void main() => runApp(const MyApp());
5 class MyApp extends StatelessWidget {
6 const MyApp({Key? key}) : super(key: key);
8 @override
9 Widget build(BuildContext context) {
10 return MaterialApp(
11 home: Scaffold(
12 appBar: AppBar(
13 title: const Text("Container example"),
14 ),
15 body: Container(
16 child:const Text("Hello! i am inside a container!",
17 style: TextStyle(fontSize: 20)),
18 ),
19 ),
20 );
21 }
22 }
Output:

‍
4. ElevatedButton
A Material Design elevated button. A filled button whose material elevates
when pressed.
Example:
1 ElevatedButton(
2 child: Text('Elevated Button'),
3 style: ElevatedButton.styleFrom(
4 primary: Colors.blue,
5 ),
6 onPressed: () {},
7 ),
‍
5. FlutterLogo
The Flutter logo, in the widget form. This widget respects the IconTheme.
Example:
1 import 'package:flutter/material.dart'
3 //Material design library
4 void main() {
5 runApp(
6 //widget tree starts here
7 MaterialApp(
8 home: Scaffold(
9 appBar: AppBar(
10 leading: Container(
11 color: Colors.white,
12 padding: EdgeInsets.all(3),
13 /** FlutterLogo Widget **/
14 child: FlutterLogo(
15 size: 10,
16 ), //FlutterLogo
17 ), //Container
18 title: Text('Hello Dev'),
19 backgroundColor: Colors.blueAccent[400],
20 centerTitle: true,
21 ), //AppBar
22 body: Center(
23 child: Container(
24 /** FlutterLogo Widget **/
25 child: FlutterLogo(
26 size: 300,
27 textColor: Colors.blue,
28 style: FlutterLogoStyle.stacked,
29 ), //FlutterLogo
30 ), //Container
31 ), //Center
32 ), //Scaffold
33 ), //MaterialApp
34 );
35 }
‍
6. Icon
A Material Design icon.
Example:
1 import 'package:flutter/material.dart';
2
3 void main() => runApp(const MyApp());
4
5 /// main application widget
6 class MyApp extends StatelessWidget {
7 const MyApp({Key? key}) : super(key: key);
8
9 static const String _title = 'Flutter Application';
10
11 @override
12 Widget build(BuildContext context) {
13 return MaterialApp(
14 title: _title,
15 home: Scaffold(
16 appBar: AppBar(title: const Text(_title)),
17 body: const MyStatelessWidget(),
18 ),
19 );
20 }
21 }
22
23 /// stateless widget that the main application instantiates
24 class MyStatelessWidget extends StatelessWidget {
25 const MyStatelessWidget({Key? key}) : super(key: key);
26
27 @override
28 Widget build(BuildContext context) {
29 return Column(
30 crossAxisAlignment: CrossAxisAlignment.stretch,
31 children: const
Output:
‍
7. Image
A widget that displays an image.
Example:
1 import 'package:flutter/material.dart';
2
3 void main() => runApp(MyApp());
4
5 class MyApp extends StatelessWidget {
6 @override
7 Widget build(BuildContext context) {
8 return MaterialApp(
9 home: Scaffold(
10 appBar: AppBar(
11 title: Text('Flutter Image Demo'),
12 ),
13 body: Center(
14 child: Column(
15 children:
‍
8. Placeholder
A widget that draws a box that represents where other widgets will one day be
added.
Example:
1 SizedBox(height: 10),
2 Container(
3 height: 100,
4 child: Placeholder(color: RED),
5 ),
6
Output:

‍
9. Row
Layout a list of child widgets in the horizontal direction.
Example:
1 import 'package:flutter/material.dart';
2
3
4 //function to trigger build
5 void main() {
6 runApp(const MyApp());
7 }
8
9
10 class MyApp extends StatelessWidget {
11 const MyApp({Key? key}) : super(key: key);
12
13
14 @override
15 Widget build(BuildContext context) {
16 return MaterialApp(
17 title: 'My Demo App',
18 theme: ThemeData(
19 primarySwatch: Colors.blue,
20 ), // ThemeData
21 home: const MyHomePage(),
22 debugShowCheckedModeBanner: false,
23 ); // MaterialApp
24 }
25 }
26
27
28 class MyHomePage extends StatefulWidget {
29 const MyHomePage({Key? key}) : super(key: key);
30
31
32 @override
33 // ignore: library_private_types_in_public_api
34 _MyHomePageState createState() => _MyHomePageState();
35 }
36
37
38 class _MyHomePageState extends State
Output:

‍
‍10. Text
A run of text with a single style.
Example:
1 import 'package:flutter/cupertino.dart';
2 import 'package:flutter/gestures.dart';
3 import 'package:flutter/material.dart';
4
5 void main() {
6 runApp(MyApp());
7 }
8
9 class MyApp extends StatelessWidget {
10 @override
11 Widget build(BuildContext context) {
12 return MaterialApp(
13 home: Scaffold(
14 appBar: AppBar(
15 title: Text("Flutter Text Widget"),
16 ),
17 body: Text("This is text"),
18 ),
19 );
20 }
21 }
22
23
Output: