Introduction
Flutter, Google’s UI toolkit for crafting natively compiled applications for mobile, web, and desktop from a single codebase, has gained immense popularity. At the heart of Flutter are its widgets, the building blocks of any Flutter app. Understanding these widgets is crucial for any Flutter developer. In this blog, we will unwrap the essentials of basic Flutter widgets and how to use them.
What are Widgets in Flutter?
Widgets in Flutter describe what their view should look like given their current configuration and state. When a widget’s state changes, Flutter rebuilds the widget to reflect the changes. This declarative approach to UI development makes the code more predictable and easier to manage.
Basic Flutter Widgets
Scaffold
The Scaffoldwidget is the base of the visual interface and provides a structure to the app, such as an AppBar, Drawer, BottomNavigationBar, and more.
appBar: AppBar(
title: Text(‘Flutter Demo’),
),
body: Center(
child: Text(‘Hello, world!’),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)
Text
The Text widget is used to display a string of text with a single style.
‘Hello, Flutter!’,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)
Container
The Containerwidget is a versatile widget that can contain a single child widget, and allows you to customize its appearance with padding, margin, borders, and background color.
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8.0),
),
child: Text(‘I am inside a container’),
)
Row and Column
Row and Column widgets are used to arrange other widgets in a horizontal and vertical manner respectively.
Row Example:
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
Text(‘Item 1’),
Text(‘Item 2’),
Text(‘Item 3’),
],
)
Column Example:
mainAxisAlignment: MainAxisAlignment.center,
children:[
Text(‘Item 1’),
Text(‘Item 2’),
Text(‘Item 3’),
],
)
Image
The Imagewidget is used to display images in your Flutter app.
Icons
The Iconwidget is used to display Material icons.
Icons.favorite,
color: Colors.pink,
size: 24.0,
)
Button Widgets
Buttons are used to capture user interactions and can come in various forms such as ElevatedButton, TextButton, and IconButton.
ElevatedButton Example:
onPressed: () {
print(‘Pressed’);
},
child: Text(‘Elevated Button’),
)
TextButton Example:
onPressed: () {
print(‘Pressed’);
},
child: Text(‘Text Button’),
)
IconButton Example:
icon: Icon(Icons.thumb_up),
onPressed: () {
print(‘Pressed’);
},
)
Conclusion
These basic widgets form the foundation of any Flutter application. By mastering these, you will be well-equipped to build more complex interfaces. Remember, Flutter’s true power lies in its widget composition, allowing you to create sophisticated UIs from simple building blocks.
Connect with Me
If you enjoyed this post and want to see more of my work, feel free to check out my GitHub and personal website:
GitHub: eldhopaulose
Website: Eldho Paulose
