Widgets In Flutter 3
We are going to explore some more widgets in this week.
In the previous tasks, we have used Widgets that were very primitive. This week we will learn about some widgets that are a bit more sophisticated but are easier to use and shortens your code drastically if there are too many widgets to deal with.
Cards are surfaces that display content and actions on a single topic.
They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. They are a bit elevated from the main screen so that it can focus more attention on the relevant information.
-
Container
Card containers hold all card elements, and their size is determined by the space those elements occupy. Card elevation is expressed by the container. -
Thumbnail [optional]
Cards can include thumbnails to display an avatar, logo, or icon. -
Header text [optional]
Header text can include things like the name of a photo album or article. -
Subhead [optional]
Subhead text can include text elements such as an article byline or a tagged location. -
Media [optional]
Cards can include a variety of media, including photos, and graphics, such as weather icons. -
Supporting text [optional]
Supporting text includes text like an article summary or a restaurant description. -
Buttons [optional]
Cards can include buttons for actions. -
Icons [optional]
Cards can include icons for actions.
Card(
clipBehavior: Clip.antiAlias,
child: Column(
children: [
ListTile(
leading: Icon(Icons.arrow_drop_down_circle),
title: const Text('Card title 1'),
subtitle: Text(
'Secondary Text',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Greyhound divisively hello coldly wonderfully marginally far upon excluding.',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
ButtonBar(
alignment: MainAxisAlignment.start,
children: [
FlatButton(
textColor: const Color(0xFF6200EE),
onPressed: () {
// Perform some action
},
child: const Text('ACTION 1'),
),
FlatButton(
textColor: const Color(0xFF6200EE),
onPressed: () {
// Perform some action
},
child: const Text('ACTION 2'),
),
],
),
Image.asset('assets/card-sample-image.jpg'),
Image.asset('assets/card-sample-image-2.jpg'),
],
),
),Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. There are different types of lists in Flutter.
- Single-Lined
- Two-Lined
- Three-Lined
ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
);Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.
Navigation drawers are recommended for:
- Apps with five or more top-level destinations
- Apps with two or more levels of the navigation hierarchy
- Quick navigation between unrelated destinations
Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Header',
style: textTheme.headline6,
),
),
Divider(
height: 1,
thickness: 1,
),
ListTile(
leading: Icon(Icons.favorite),
title: Text('Item 1'),
selected: _selectedDestination == 0,
onTap: () => selectDestination(0),
),
...
],
),
),Sometimes we have to write exceptionally long code, requiring lots of different widgets. The code of an individual widget may be so long that your code will finally have a lot of lines, which will make your code unreadable, and obsolete. To prevent this disaster, we usually write functions or classes to help us reduce the number of lines altogether.
Let me demonstrate an example. The following code contains a list of at least 20 Text widgets with different texts in it.
ListView(
children: [
ListTile(
title: Text('Text 1'),
),
ListTile(
title: Text('Text 2'),
),
ListTile(
title: Text('Text 3'),
),
ListTile(
title: Text('Text 4'),
),
ListTile(
title: Text('Text 5'),
),
ListTile(
title: Text('Text 6'),
),
...
],
);Now the problem with the above code is that it is unreadable and obsolete. We can now use a function with the return type Widget to return a ListTile widget with the text. It should look something like this:
Widget showListtile(String text){
return ListTile(
title: Text(text),
),
}
...
@override
Widget build(BuildContext context){
return ListView(
children: [
showListtile("Text 1"),
showListtile("Some Text 2"),
showListtile("Some More Text 3"),
...
]
);
}The above code is much more refined and much more readable to the user.