In the previous section we have seen how the Container Widget works. However, to build a good layout we need to use other layout Widgets such as Column, and Card. Along with it, in many cases we need one or more images.
We have already learned one key concept. The layout Widgets are of two types. Single-child and Multi-child.
The Container is a single-child Widget. But, in most cases, we need to place Widgets either vertically, or horizontally.
Therefore, Flutter comes with multi-child widgets like Column.
Before we start, let us take a look at the Flutter App that we are going to create.
To start with, we need a MaterialApp() which will act as the root of the Widget tree.
We need to remember the Widget tree diagram that we have seen previously.
Our App Home Page extends a Stateless Widget and uses a build() method that returns Scaffold Widget first.
Scaffold has many properties that expect other Widgets, like AppBar, background color, etc.
Therefore, initially, the upper part of the Widget tree looks like the following.
class AppHomePage extends StatelessWidget {
const AppHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.pink[900],
),
backgroundColor: Colors.pink[300],
body: Center(
child: Column(
children: []
),
),
);
}
}
As we see we need to place all the Widgets inside the Column Widget.
And that includes an Image Widget.
As a consequence, firstly, we need to know how we can use the Image Widget.
How do you use an image in Column in flutter?
The first thing first.
We should head over to the “pubspec.yaml” file and the necessary dependencies first.
If we want to use image locally, we need to create an “images” folder in the project directory.
Secondly, we mention the path in the pubspec.yaml file.
# The following section is specific to Flutter.
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets: [images/]Here the indentation is extremely important. Therefore, be careful about that.
Now, we can keep as many images in our “images” folder and mention the path in our Image Widget.
const Image(
image: AssetImage('images/fig3.5.jpg'),
),As we can see the Image Widget has the property ‘image’ which expects the AssetImage Widget.
The AssetImage Widget passes one String data that actually mentions the path.
Now, we can place the Image widget inside the Column widget.
body: Center(
child: Column(
children: [
const Image(
image: AssetImage('images/fig3.5.jpg'),
),
]
), The pattern of the Widget tree grows in this way.
Certainly we can place that image inside a Container and control the width and height.
Below the Image Widget, we have used two Widgets SizedBox and Divider to create a nice little line.
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),But the Card Widget makes this design unique.
How do you make cards in Flutter?
The Card Widget is a sheet of Material used to represent some related information. We may have designed the same thing using the Container Widget.
But why should we?
Firstly, that would be cumbersome.
Secondly, the Card widget comes up as a panel with slightly rounded corners and an elevation shadow.
Finally, the Flutter team has already made it for such use. In addition we can customise it with a ListTile Widget.
List tiles are arranged in Columns in Drawers and Cards.
Our Card looks like the follwoing.
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('Ask yourself why you are fighting for?'),
trailing: Icon(Icons.question_answer_outlined),
),
),Through the margin property we have controlled the space around. It starts with left. Then top, right and bottom follow along.
Just pass the “double” data type.
The ListTile Widget has two properties – the “title” and “trailing”. The trailing property returns an Icon Widget.
There are hundreds of material icons that Flutter automatically provide.
The full code in a single glance
import 'package:flutter/material.dart';
main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
static const title = 'How to be Peaceful?';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: title,
home: AppHomePage(
title: title,
),
);
}
}
class AppHomePage extends StatelessWidget {
const AppHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.pink[900],
),
backgroundColor: Colors.pink[300],
body: Center(
child: Column(
children: [
const SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
thickness: 6.0,
),
),
const Image(
image: AssetImage('images/fig3.5.jpg'),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('Ask yourself why you are fighting for?'),
trailing: Icon(Icons.question_answer_outlined),
),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('The reason? In most cases, Trivial.'),
trailing: Icon(Icons.sms_failed),
),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('Remember, Dialogue is the Key.'),
trailing: Icon(Icons.mobile_friendly),
),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
],
)),
);
}
}You can run the code. However, you need to place the image in the image folder.
Or, you can download the full code from the GitHub repository.
What Next?
Books at Leanpub Books in Apress My books at Amazon Courses at Educative GitHub repository Technical blog Twitter
Leave a Reply