Last Updated on 2021-10-16 by Clay
Recently, I have been studying how to build bottom buttons with overlapping shapes in Flutter as shown below:
After researching, I find that Flutter provides a component layout called Stack, which allows different components to overlap each other.
So today I will simply record how to use Stack layout.
Stack layout in Flutter
The Stack layout is just what the name implies. The earlier the components are created, the lower the components will not get stuck in each other's position. It is a layered layout.
The following is a simple sample code:
import 'package:flutter/material.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ContainerStack(),
);
}
}
// ContainerStack
class ContainerStack extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
],
),
),
);
}
}
Output:
But be careful, if the component on the top to stack layer have a larger size than components below, the below one will be covered!
In addition, since I have written it, I also share the bottom button code:
import 'package:flutter/material.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ContainerStack(),
);
}
}
// ContainerStack
class ContainerStack extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 50,
color: Colors.grey[800],
),
Container(
alignment: Alignment.bottomRight,
child: ClipOval(
child: Material(
color: Colors.black, // button color
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
border: Border.all(
color: Colors.grey,
width: 4.0,
),
),
child: InkWell(
splashColor: Colors.grey, // inkwell color
child: SizedBox(
width: 75,
height: 75,
child: Icon(
Icons.add,
color: Colors.white,
size: 60,
)),
onTap: () {},
),
),
)),
),
],
),
);
}
}
Output:
I like the bottom status bar like this, much better than the monotonous buttons that are all square.
References
- https://stackoverflow.com/questions/49809351/how-to-create-a-circle-icon-button-in-flutter
- https://stackoverflow.com/questions/44275404/paint-a-circular-image-with-border
- https://api.flutter.dev/flutter/widgets/Stack-class.html