In Flutter, everything you see on the screen is a widget. From simple text labels to complex navigation, widgets are the fundamental building blocks of your user interface. This section will explore some of the most commonly used widgets, providing you with the practical knowledge to start constructing your own beautiful Flutter applications.
Let's dive into some essential widgets you'll be using frequently:
Text Widget
The Text widget is used to display a string of text. It's incredibly versatile and allows for styling such as font size, color, weight, and more.
Text(
'Hello, Flutter Fundamentals!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)Container Widget
The Container widget is a multipurpose widget that can be used for styling, positioning, and sizing other widgets. It's often used for padding, margins, borders, and background colors.
Container(
width: 150,
height: 100,
padding: EdgeInsets.all(20),
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(10),
),
child: Text('Styled Box'),
)Row and Column Widgets
These widgets are essential for arranging other widgets horizontally (Row) or vertically (Column). They are fundamental for creating layouts.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star),
Text('Item 1'),
Icon(Icons.favorite),
],
)
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Top'),
Text('Middle'),
Text('Bottom'),
],
)Image Widget
Displays images from various sources, including network URLs, local assets, or memory.
Image.network(
'https://flutter.dev/assets/flutter-logo-d004354b4e774829865270687f8a9186.png',
width: 100,
height: 100,
)
Image.asset('assets/my_image.png',
width: 100,
height: 100,
)Button Widgets
Flutter offers a variety of buttons for user interaction. We'll look at ElevatedButton and TextButton as common examples.
ElevatedButton(
onPressed: () {
// Respond to button press
},
child: Text('Tap Me'),
)
TextButton(
onPressed: () {
// Respond to button press
},
child: Text('Click Here'),
)Scaffold Widget
The Scaffold widget provides a basic visual structure for the app, including an app bar, body, and floating action button. It's often the root of a screen.
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: Text('Welcome to the body!'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
)ListView Widget
Efficiently displays a scrollable list of widgets. It's perfect for displaying long lists of data where not all items are visible at once.
ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
)Understanding these foundational widgets will equip you to build a wide range of user interfaces. As you progress, you'll encounter more specialized widgets, but the principles of composition and arrangement learned here will remain central to your Flutter development journey.