Flutter is an incredible framework that makes building cross-platform mobile, web, and desktop apps a breeze. At the heart of Flutter are its widgets, the building blocks for creating beautiful and functional user interfaces. If you're new to Flutter, understanding its core widgets is crucial to kick-start your development journey. Here are the top 10 Flutter widgets every beginner should know:
1. Container
The Container widget in Flutter is a flexible box used for designing and arranging UI elements. It enables you to add padding, margins, background colors, and rounded corners to its child widgets, making it essential for creating visually appealing layouts.
You can also control the size and alignment of its content with ease. Below is an example of a Container with padding, margin, and a custom background:
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: Text('Styled Container', style: TextStyle(color: Colors.white)),
)
2. Row and Column
The Row and Column widgets are essential layout widgets in Flutter, used to arrange multiple child widgets horizontally and vertically, respectively. They provide an intuitive way to design responsive interfaces, making them indispensable for building complex UIs. The Row arranges widgets in a single horizontal line, while the Column stacks widgets vertically. These widgets can hold any number of children, allowing for great flexibility in creating layouts.
Both Row and Column come with powerful alignment properties. For instance, you can use mainAxisAlignment to control how widgets are spaced along the main axis (horizontal for Row, vertical for Column) and crossAxisAlignment to control alignment along the perpendicular axis. This flexibility lets you create well-structured layouts, whether you're centering widgets, evenly distributing them, or aligning them to one side.
Additionally, you can combine Row and Column widgets to create nested and more sophisticated layouts. By using them together, you can handle virtually any layout requirement, from simple forms to complex dashboards. Flutter’s design system makes it seamless to work with these widgets, offering tools like Expanded and Spacer for managing space dynamically.
Here’s an example demonstrating a Column containing text and an embedded Row to showcase their collaborative use in a responsive UI:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Column Example',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 16), // Adds spacing
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.star, color: Colors.yellow, size: 30),
Icon(Icons.star, color: Colors.yellow, size: 30),
Icon(Icons.star, color: Colors.yellow, size: 30),
],
),
],
)
3. Text
The Text widget in Flutter is used to display text in your application, whether it’s static content, dynamic data, or user input. It is one of the most commonly used widgets and offers a wide range of customization options to format and style text, such as changing font size, color, weight, alignment, and more.
The Text widget supports rich formatting through the TextStyle property. With this, you can adjust properties like font family, font style, letter spacing, shadows, and even decoration (e.g., underlining or strikethrough). This makes it versatile for creating both simple and elaborate text-based UI elements.
Another key feature of the Text widget is its ability to handle multi-line and ellipsized text. You can control how the text wraps or truncates when the content exceeds the available space by using properties like maxLines and overflow. This is especially useful for creating responsive UIs where text content varies.
Here’s an example showcasing the Text widget with custom styling:
Text(
'Flutter makes text styling easy!',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.indigo,
letterSpacing: 1.5,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted,
),
textAlign: TextAlign.center,
)
4. Image
The Image widget in Flutter is used to display images in your application, making it a fundamental part of designing visually engaging UIs. It allows you to load images from various sources, including local assets, network URLs, memory, or files stored on the device. The widget provides extensive flexibility to style, resize, and align images as needed.
With the Image widget, you can control the image's size using properties like height and width and decide how it fits within its container using the fit property. Options such as BoxFit.cover or BoxFit.contain ensure the image scales proportionally to fit its container, making it ideal for responsive designs.
The widget also supports error handling for cases where an image fails to load, allowing you to display a placeholder or an alternative widget. Additionally, for asset images, Flutter’s asset bundling system ensures seamless integration, optimizing app performance.
Here’s an example of using the Image widget to load an image from a network:
Image.network(
'https://flutter.dev/images/flutter-logo-sharing.png',
height: 100,
width: 100,
fit: BoxFit.cover,
)
5. Scaffold
The Scaffold widget in Flutter is a powerful and commonly used layout structure that provides a basic framework for building a screen. It helps developers create consistent and user-friendly app interfaces by offering built-in components such as an app bar, navigation drawer, bottom navigation bar, floating action button, and more. It acts as the "skeleton" of a page, simplifying the process of arranging UI elements.
One of the standout features of Scaffold is its ability to manage layouts with pre-defined slots for common components. For instance, the appBar property is used to display a customizable header, while the body property holds the main content of the screen. You can also add a floatingActionButton for quick actions and a bottomNavigationBar for navigation between pages.
The Scaffold widget also supports gesture-based interactions such as pulling out a Drawer from the side or showing SnackBar messages. This makes it an ideal choice for creating modern app layouts that follow Material Design principles.
Here’s an example of a basic Scaffold layout:
Scaffold(
appBar: AppBar(
title: Text('Scaffold Example'),
backgroundColor: Colors.blue,
),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 18),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('Button Pressed');
},
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
],
),
)
6. ListView
The ListView widget in Flutter is a versatile scrollable widget used to display a list of items vertically or horizontally. It is perfect for showing dynamic content, such as a list of posts, messages, or products, and handles large data sets efficiently with features like lazy loading. It is one of the most commonly used widgets for creating scrollable layouts in mobile applications.
There are different types of ListView for various use cases:
- ListView.builder: Efficiently creates items on demand, ideal for large or infinite lists.
- ListView.separated: Adds separators (e.g., dividers) between items.
- ListView.custom: Allows advanced customization using a SliverChildDelegate.
- ListView (default constructor): Used for small, static lists.
The widget provides properties like scrollDirection for horizontal or vertical scrolling and shrinkWrap for adjusting the list's size within a parent widget. Additionally, physics can be customized to control the scrolling behavior, such as enabling or disabling it.
ListView(
children: [
ListTile(
leading: Icon(Icons.person),
title: Text('John Doe'),
subtitle: Text('Software Engineer'),
trailing: Icon(Icons.call),
),
ListTile(
leading: Icon(Icons.person),
title: Text('Jane Smith'),
subtitle: Text('Product Manager'),
trailing: Icon(Icons.email),
),
],
)
7. Stack
The Stack widget in Flutter is used to overlay widgets on top of each other, allowing for complex and layered layouts. It provides a flexible way to position widgets relative to one another along both axes, making it ideal for creating designs like floating buttons, image overlays, and custom UI effects. The Stack widget works by placing its children widgets on top of one another in a single stack, where each child can be positioned relative to the stack’s edges or the other children.
In a Stack, the children widgets are positioned based on the Positioned widget, which defines their location within the stack. By using properties like top, left, right, and bottom, you can control the exact positioning of each widget. If you don't use Positioned, the children are placed in the order they are declared, with the first child appearing at the bottom of the stack.
The Stack widget is great for creating UI elements that need to overlap or for implementing advanced designs like badges, pop-ups, and animated layers.
Stack(
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.blue,
),
Positioned(
top: 20,
left: 20,
child: Icon(Icons.star, color: Colors.yellow, size: 50),
),
Positioned(
bottom: 20,
right: 20,
child: Icon(Icons.access_alarm, color: Colors.white, size: 50),
),
],
)
8. ElevatedButton
The ElevatedButton widget in Flutter is a Material Design button that has a raised effect, giving it a 3D appearance by casting a shadow. It's commonly used for primary actions or interactions within the app. ElevatedButton helps improve the visual hierarchy and accessibility of your app by making important actions stand out.
The ElevatedButton widget comes with built-in properties that allow you to customize its appearance, including onPressed, style, and child. The onPressed property is a callback function that is triggered when the button is pressed, while the style property allows you to customize the button's color, shape, elevation, and more. The child property is where you can place the button's label or icon.
ElevatedButton(
onPressed: () {
print('Custom Styled Button Pressed');
},
style: ElevatedButton.styleFrom(
primary: Colors.blue, // Button color
onPrimary: Colors.white, // Text color
elevation: 5, // Shadow depth
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30), // Rounded corners
),
),
child: Text('Styled Button'),
)
9. TextField
The TextField widget in Flutter is used to capture user input in the form of text. It is a highly customizable widget that can be used for various types of input fields, such as single-line text input, multi-line text areas, or password fields. TextField supports various properties, such as controller, decoration, and onChanged, making it flexible and easy to integrate into your app's UI.
The controller property is used to manage the text being edited and allows you to retrieve or manipulate the input text. The decoration property enables you to add visual elements to the text field, like a label, hint text, border, and more, giving you control over the field's appearance. Additionally, onChanged provides a callback function that is triggered whenever the input text changes, allowing for real-time updates or validation.
TextField(
onChanged: (text) {
print('Input text: $text');
},
decoration: InputDecoration(
hintText: 'Enter something',
border: OutlineInputBorder(),
),
)
10. FutureBuilder
The FutureBuilder widget in Flutter is used to build UI based on the result of a Future. It allows you to asynchronously fetch data and update the UI when the data is available or when an error occurs. This widget is especially useful for handling API calls, loading data from a database, or performing any other task that takes time to complete.
The FutureBuilder takes a Future as an argument and rebuilds the widget tree based on the state of the Future (whether it is still loading, completed successfully, or failed). It provides a builder function, where you can define how the UI should change based on the state of the Future. The builder function has access to the connectionState (which can be waiting, done, or active) and the data or error produced by the Future.
FutureBuilder<String>(
future: fetchData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator(); // Show loading spinner
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}'); // Show error message
} else {
return Text('Data: ${snapshot.data}'); // Show fetched data
}
},
)
In this blog, we've explored some of the most essential Flutter widgets every beginner should be familiar with to build robust and visually appealing mobile applications. From basic layout widgets like Container, Row, and Column, to interactive elements such as ElevatedButton, TextField, and FutureBuilder, each widget plays a crucial role in crafting a functional and intuitive user interface. Understanding how to use these widgets effectively is the foundation for becoming proficient in Flutter development.
Mastering these widgets will not only enhance your ability to create responsive and dynamic layouts but also give you the flexibility to design your app with ease and efficiency. As you continue to learn and experiment with Flutter, you'll uncover even more powerful widgets and tools to add to your toolkit. Keep building, experimenting, and refining your skills—Flutter has a lot to offer, and with practice, you can create beautiful, high-performance apps in no time!