Flutter 7: Containers & Structure - A Comprehensive Guide with Examples
Teqani Blogs
Writer at Teqani
Introduction
This article provides a comprehensive guide to understanding and utilizing containers and structure widgets in Flutter 7. These widgets are fundamental for organizing content, navigating screens, and maintaining a clean layout in your Flutter applications. We'll explore various essential widgets with practical examples.
Card - Shadowed Container
The Card widget in Flutter is a Material Design container that provides elevation and rounded corners, giving a visually appealing look to your content. It's essentially a container with a shadow.
Card(
elevation: 4,
child: Padding(
padding: EdgeInsets.all(16),
child: Text('This is inside a card'),
),
)This example demonstrates how to create a simple Card with an elevation of 4 and some padding around the text inside.
CupertinoSlidingSegmentedControl - iOS Segmented Control
The CupertinoSlidingSegmentedControl widget allows you to switch between different values using a sliding iOS-style toggle. It’s a great way to offer users different options or views.
CupertinoSlidingSegmentedControl<int>(
groupValue: 0,
children: {
0: Text('First'),
1: Text('Second'),
},
onValueChanged: (val) {},
)Here, we create a segmented control with two options: 'First' and 'Second'. The groupValue determines which option is initially selected, and the onValueChanged callback handles changes.
Drawer - Side Panel for Navigation
A Drawer is a panel that slides in from the left (or right) side of the screen to display navigation links or options. It’s commonly used for providing a menu in your app.
Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(color: Colors.blue),
child: Text('Header Content'),
),
ListTile(title: Text('Home')),
ListTile(title: Text('Settings')),
],
),
)This example shows a basic Drawer with a header and two navigation items: 'Home' and 'Settings'.
DrawerHeader - Top Profile/Info Section in Drawer
The DrawerHeader is used inside a Drawer to display profile information or branding content. It is placed at the top of the Drawer.
DrawerHeader(
decoration: BoxDecoration(color: Colors.green),
child: Column(
children: [
CircleAvatar(radius: 30, backgroundColor: Colors.white),
SizedBox(height: 10),
Text('Hello, User!'),
],
),
)In this example, the DrawerHeader contains a CircleAvatar for a profile picture and a greeting text.
FractionallySizedBox - Relative Sizing
FractionallySizedBox allows you to size a widget as a percentage of its parent container. This is useful for creating responsive layouts.
FractionallySizedBox(
widthFactor: 0.8, // 80% width of parent
child: Container(
color: Colors.orange,
height: 100,
child: Center(child: Text('80% Width')),
),
)Here, the Container occupies 80% of the width of its parent, demonstrating relative sizing.
FloatingActionButton - Primary Action Button
A FloatingActionButton is a circular action button that is typically used for primary actions, such as creating or adding content. It floats above the content on the screen.
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
)This creates a simple FloatingActionButton with an 'add' icon that does nothing when pressed.
Pro Tip
Use Scaffold with Drawer, AppBar, and FloatingActionButton to build fully structured screens quickly.
All blogs are certified by our company and reviewed by our specialists
Issue Number: #76db3567-dbc1-47ef-84b5-1bd2a291af03