A great design is an important part in a good Application on both Android and iOS. In flutter, it’s easy to design layouts but little complicated if you are a beginner.
In this article let’s learn a simple way to place a widget on another widget as overlapping. For example, placing a text on image or placing a text on a container, etc.
Let’s start…
As first, let’s learn how it works…
We can use ‘Stack’ widget for this purpose. As we know the working of stack, in flutter, stack accepts children one by one and last inserted children will be shown at top.
For example, if you place two texts on stack, last placed text will be placed over on previous one.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Overlay Widgets';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: BuildBody(),
),
);
}
}
class BuildBody extends StatefulWidget {
@override
_BuildBodyState createState() => _BuildBodyState();
}
class _BuildBodyState extends State<BuildBody> {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Text("first"),
Text("Second"),
],
);
}
}
Output:
Let us place a text on an image. Learn here if you want to know how to add an image into a flutter project.
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset('images/pavlova.jpg'),
Text("How are you today?",
style: new TextStyle(
fontSize: 20,
color: Colors.red,
) ,),
],
);
}
Output
If you want to change the position of the text, then you need to place the text on a container and add ‘padding’ property to the container.
Example
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset('images/pavlova.jpg'),
Container(
padding: EdgeInsets.fromLTRB(70, 150, 0, 0),
child: Text("How are you today?",
style: new TextStyle(
fontSize: 20,
color: Colors.red,
) ,),
)
],
);
}
Output
If you want to centralize the text on image, then use ‘Center’ widget first and place the text as child.
If you want to centralize both image and text, then place everything inside a container with width as approximate width of the image.
Example:
Widget build(BuildContext context) {
return Container(
height: 250,
child: Stack(
children: <Widget>[
Image.asset('images/pavlova.jpg'),
Center(
child: Container(
child: Text("How are you today?",
style: new TextStyle(
fontSize: 20,
color: Colors.red,
) ,),
)
)
],
)
);
}
Output:
There are many other ways to centralize or align the positions of widget. You can read some of them here.
Be First to Comment