Flutter Widgets

Flutter Widget Types

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 noti ed when the change occurs
using setState.

Most commonly used Flutter

Code Example:

1Dart
2import 'package:flutter/material.dart';
3
4
5/// Flutter code sample for [AppBar].
6
7
8void main() => runApp(const AppBarApp());
9
10
11class AppBarApp extends StatelessWidget {
12 const AppBarApp({super.key});
13
14
15 @override
16 Widget build(BuildContext context) {
17 return const MaterialApp(
18 home: AppBarExample(),
19 );
20 }
21}
22
23
24class AppBarExample extends StatelessWidget {
25 const AppBarExample({super.key});
26
27
28 @override
29 Widget build(BuildContext context) {
30 return Scaffold(
31 appBar: AppBar(
32 title: const Text('AppBar Demo'),
33 actions: <Widget>[
34 IconButton(
35 icon: const Icon(Icons.add_alert),
36 tooltip: 'Show Snackbar',
37 onPressed: () {
38
ScaffoldMessenger.of(context).showSnackBar(
39 const SnackBar(content: Text('This is
a snackbar')));
40 },
41 ),
42 IconButton(
43 icon: const Icon(Icons.navigate_next),
44 tooltip: 'Go to the next page',
45 onPressed: () {
46 Navigator.push(context,
MaterialPageRoute<void>(
47 builder: (BuildContext context) {
48 return Scaffold(
49 appBar: AppBar(
50 title: const Text('Next page'),
51 ),
52 body: const Center(
53 child: Text(
54 'This is the next page',
55 style: TextStyle(fontSize: 24),
56 ),
57 ),
58 );
59 },
60 ));
61 },
62 ),
63 ],
64 ),
65 body: const Center(
66 child: Text(
67 'This is the home page',
68 style: TextStyle(fontSize: 24),
69 ),
70 ),
71 );
72 }
73}
74
Output:
2. Column
Layout a list of child widgets in the vertical direction.

Code Example:

1import 'package:flutter/material.dart';
2
3void main() {
4 runApp(
5 const MaterialApp(
6 home: Scaffold(
7 body: Center(
8 child: Column(
9 mainAxisAlignment: MainAxisAlignment.center,
10 children: <Widget>[
11 const Text('Hello, World!'),
12 const Text('Welcome to Flutter'),
13 ],
14 ),
15 ),
16 ),
17 ),
18 );
19}
20
Output:

3. Container
A convenience widget that combines common painting, positioning, and sizing widgets.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3 runApp(
4 MaterialApp(
5 home: Scaffold(
6 body: Center(
7 child: Container(
8 width: 200,
9 height: 200,
10 color: Colors.blue,
11 child: const Text('Hello, Container!'),
12 ),
13 ),
14 ),
15 ),
16 );
17}

4. ElevatedButton
A Material Design elevated button. A lled button whose material elevates when
pressed.

Code Example:

1import 'package:flutter/material.dart';
2
3
4void main() {
5 runApp(
6 MaterialApp(
7 home: Scaffold(
8 body: Center(
9 child: ElevatedButton(
10 onPressed: () {
11 // Button click logic here
fi
12 print('Button pressed');
13 },
14 child: const Text('Click me'),
15 ),
16 ),
17 ),
18 ),
19 );
20}
21
Output:

5. FlutterLogo
The Flutter logo, in the widget form. This widget respects the IconTheme.

Code Example:

1import 'package:flutter/material.dart';
2
3
4void main() {
5 runApp(
6 MaterialApp(
7 home: Scaffold(
8 body: Center(
9 child: FlutterLogo(
10 size: 100, // Adjust the size as needed
11 style: FlutterLogoStyle.stacked, // Choose
the style: stacked, horizontal, or markOnly
12 textColor: Colors.blue, // Set the color of
the text (if applicable)
13 ),
14 ),
15 ),
16 ),
17 );
18}
19
Output:

6. Icon
A Material Design icon.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3 runApp(
4 MaterialApp(
5 home: Scaffold(
6 body: Center(
7 child: Icon(
8 Icons.favorite,
9 color: Colors.red,
10 size: 48,
11 ),
12 ),
13 ),
14 ),
15 );
16}
17
Output:

7. Image
A widget that displays an image.

Code Example:
1import 'package:flutter/material.dart';
2void main() {
3 runApp(
4 MaterialApp(
5 home: Scaffold(
6 body: Center(
7 child: Image.network('https://media.licdn.com/
dms/image/dhiwise_logo?e=1731542400&'),
8 ),
9 ),
10 ),
11 );
12}
13
Output:

8. Placeholder
A widget that draws a box that represents where other widgets will one day be added.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3 runApp(
4 MaterialApp(
5 home: Scaffold(
6 body: Center(
7 child: Placeholder(
8 fallbackWidth: 100,
9 fallbackHeight: 100,
10 color: Colors.red.shade300,
11 strokeWidth: 1.0,
12 ),
13 ),
14 ),
15 ),
16 );
17}
18
Output:

9. Row
Layout a list of child widgets in the horizontal direction.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3 runApp(
4 MaterialApp(
5 home: Scaffold(
6 body: Center(
7 child: Row(
8 mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
9 children: [
10 Text('Hello'),
11 Icon(Icons.favorite),
12 ElevatedButton(onPressed: () {}, child:
Text('Button')),
13 ],
14 ),
15 ),
16 ),
17 ),
18 );
19}
20
Output:

10. Text
for displaying strings of text. It provides basic styling options to control the appearance
of the text.

Code Example:

1import 'package:flutter/material.dart';
2void main() {
3 runApp(
4 MaterialApp(
5 home: Scaffold(
6 body: Center(
7 child: Text(
8 'Hello, world!',
9 style: TextStyle(
10 fontSize: 24,
11 fontWeight: FontWeight.bold,
12 color: Colors.blue,
13 ),
14 ),
15 ),
16 ),
17 ),
18 );
19}
20
Output: