iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
自我挑戰組

使用flutter建構Android和iOs APP系列 第 18

背景圖片,上透明度,增加icon按鈕

  • 分享至 

  • xImage
  •  

目標:
登入頁有個圖片背景,並有透明度
收合式選單的list旁邊有icon
header的最右邊有icon

如此連結

  1. pubspec.yaml
    assets:
    - assets/food.jpg
    - assets/background.jpg
    //記得放入圖片
  1. pages/auth.dart
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(...),
                ],
            ),
            ),
        ),
        ),
    );
    }
}

  1. products.dart

    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()),
                )
            ],
            )
        ],
        ),
    );
    }
  1. pages/products.dart
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(...),
        ),
    );
    }
}

上一篇
橫向排版與圓角背景和邊框
下一篇
整理檔案架構:把組件跟公版拆出來
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言