2019-05-06
目錄：
- 正方形
- 圓形
- 橢圓
- 三角形
- 五角星
- 總結(jié)
1. 正方形
（1）普通正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(color: Colors.pinkAccent),
),
),
);
}
正方形
（2）立體正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 立體正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.red,
boxShadow: const [
BoxShadow(blurRadius: 10),
],
),
),
),
);
}
立體正方形
（3） 線性漸變正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 線性漸變正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: const [
Colors.red,
Colors.blue,
],
),
),
),
),
);
}
線性漸變正方形
（4）渲染正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 渲染正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: const [Colors.yellow, Colors.blue],
stops: const [0.4, 1.0],
),
),
),
),
);
}
渲染正方形
（5）五彩正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 五彩正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: SweepGradient(
colors: const [
Colors.blue,
Colors.green,
Colors.yellow,
Colors.red,
Colors.blue,
],
stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
),
),
),
),
);
}
五彩正方形
（6）圖片陰影正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape:圖片背景正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
foregroundDecoration: BoxDecoration(
backgroundBlendMode: BlendMode.exclusion,
gradient: LinearGradient(
colors: const [
Colors.red,
Colors.blue,
],
),
),
child: Image.network(
'https://flutter.io/images/catalog-widget-placeholder.png',
),
),
),
);
}
圖片陰影正方形
2. 圓形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 圓形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.purpleAccent,
shape: BoxShape.circle,
),
),
),
);
}
圓
3. 橢圓
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 橢圓')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.yellowAccent, width: 2),
borderRadius: BorderRadius.all(Radius.circular(18)),
),
),
),
);
}
橢圓
4. 三角形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 三角形')),
body: Center(
child: Container(
height: 400,
width: 400,
transform: Matrix4.rotationZ(pi /4),
decoration: BoxDecoration(color: Colors.green),
),
),
);
}
三角形
5. 五角星
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 五角星')),
body:Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
Icon(Icons.star_half, size: 50),
],
),
);
}
五角星
6. 總結(jié)
文章是 Android 面向需求開發(fā)系列中的一文壮吩，更多相關(guān)文章請關(guān)注。如若有什么問題觉啊，也可以通過掃描二維碼發(fā)消息給我沈贝。轉(zhuǎn)載請注明出處，謝謝搜吧！
二維碼
