目標:
登入頁有個圖片背景,並有透明度
收合式選單的list旁邊有icon
header的最右邊有icon
assets:
- assets/food.jpg
- assets/background.jpg
//記得放入圖片
class _AuthPageState extends State<AuthPage> {
...
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(...),
body: Container(
decoration: BoxDecoration(
image: DecorationImage( //背景圖片
fit: BoxFit.cover, //佔滿整頁
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5), //加上一層透明0.5的黑
BlendMode.dstATop //混合模式,放到上面去
),
image: AssetImage('assets/background.jpg'),
),
),
padding: EdgeInsets.all(10.0),
child: Center( //垂直也置中
child: SingleChildScrollView(
//會根據鍵盤調整位置
//隨然我覺得跳來跳去有點醜
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'E-Mail',
filled: true,
fillColor: Colors.white
//有背景色白色的input
),
keyboardType: TextInputType.emailAddress,
onChanged: (String value) {
setState(() {
_emailValue = value;
});
},
),
SizedBox(
height: 10.9,
),
TextField(
decoration: InputDecoration(
labelText: 'Password',
filled: true,
fillColor: Colors.white
),
obscureText: true,
onChanged: (String value) {
setState(() {
_passwordValue = value;
});
},
),
SwitchListTile(...),
SizedBox(
height: 10.0,
),
RaisedButton(...),
],
),
),
),
),
);
}
}
Widget _buildProductItem(BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Image.asset(products[index]['image']),
Container(...), //標題與價格
Container(...), //地址
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.info), //資訊icon
color: Theme.of(context).accentColor,
onPressed: () => Navigator.pushNamed<bool>(
context, '/product/' + index.toString()),
),
IconButton(
icon: Icon(Icons.favorite_border), //愛心icon
color: Colors.red,
onPressed: () => Navigator.pushNamed<bool>(
context, '/product/' + index.toString()),
)
],
)
],
),
);
}
class ProductsPage extends StatelessWidget {
...
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
AppBar(
automaticallyImplyLeading: false,
//drawer裡面沒有漢堡圖示
title: Text('Choose'),
),
ListTile(
leading: Icon(Icons.edit),
//字的旁邊有icon
title: Text('Manage Products'),
onTap: () {
Navigator.pushReplacementNamed(context, '/admin');
},
)
],
),
),
appBar: AppBar(
title: Text('EasyList'),
actions: <Widget>[
//header的最右邊可以有很多按鈕
//所以傳入一個陣列
IconButton(
icon: Icon(Icons.favorite),
//愛心按鈕
onPressed: () {},
)
],
),
body: ProductManager(products),
);
}
}
5.pages/product_admin.dart
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
AppBar(
automaticallyImplyLeading: false,
title: Text('Choose'),
),
ListTile(
leading: Icon(Icons.shop),
//購物袋icon
title: Text('All Products'),
onTap: () {
Navigator.pushReplacementNamed(context, '/products');
},
)
],
),
),
appBar: AppBar(...), //含有tab頁籤
body: TabBarView(...),
),
);
}
}