Last Updated on 2021-10-16 by Clay
最近一直在研究在 Flutter 中，該如何建造如下圖這般擁有重疊形狀的底部按鈕：
研究之後才發現，Flutter 有提供一種叫做 Stack 的元件佈局，可以讓不同的元件彼此重疊。於是，今天就簡單紀錄如何使用 Stack 佈局元件。
Flutter 中的 Stack 佈局元件
Stack 佈局元件，顧名思義便是一個『堆疊』的動作。越早建立的元件便在越下方，元件之間不會互相卡到彼此的位置，是一層層疊上去的佈局型態。
以下是段簡單的範例程式碼。
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:
不過要注意的是，如果後來堆疊上的元件比底下的元件來得面積更大，是會把下面的元件蓋住的！
另外，既然都寫了，也順便紀錄我所寫的底部按鈕程式：
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:
我喜歡這樣的底部狀態欄，比單調的全部都是正方形的按鈕好多了。
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