iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0
自我挑戰組

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

將新增功能移到admin頁面

今天的目標是將新增功能移到admin頁面
如此連結

檔案結構越來越複雜
我畫了整理圖如下,

  1. main.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840E4Ah4faeFu.png

  2. pages/products.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840I9Jai8ocSG.png

  3. product_manager.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840EGxxx8UTPv.png

  4. products.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840aRz0SoyE5k.png

  5. pages/product.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840FItUHDDBq2.png

  6. pages/product_admin.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840dsKKLaAMnR.png

  7. pages/product_create.dart
    https://ithelp.ithome.com.tw/upload/images/20181015/20111840WZugEubtqH.png

  8. main.dart


class _MyAppState extends State<MyApp> {
  List<Map<String, dynamic>> _products = [];

  void _addProduct(Map<String, dynamic> product) {
    setState(() {
      _products.add(product);
    });
    print(_products);
  }

  void _deleteProduct(int index) {
    setState(() {
      _products.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ...,
      routes: {
        '/': (BuildContext context) => ProductsPage(_products),
        '/admin': (BuildContext context) =>
            ProductsAdminPage(_addProduct, _deleteProduct),
      },
      onGenerateRoute: ...
      onUnknownRoute: ...
    );
  }
}

  1. pages/product_admin.dart

class ProductsAdminPage extends StatelessWidget {
  final Function addProduct;
  final Function deleteProduct;

  ProductsAdminPage(this.addProduct, this.deleteProduct);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        drawer: Drawer(...),
        appBar: AppBar(
          title: Text('Manage Products'),
          bottom: TabBar(...),
        ),
        body: TabBarView(
          children: <Widget>[ProductCreatePage(addProduct), ProductListPage()],
        ),
      ),
    );
  }
}

  1. pages/product_create.dart
import 'package:flutter/material.dart';

class ProductCreatePage extends StatefulWidget {
  final Function addProduct;

  ProductCreatePage(this.addProduct);

  @override
  State<StatefulWidget> createState() {
    return _ProductCreatePageState();
  }
}

class _ProductCreatePageState extends State<ProductCreatePage> {
  String titleValue;
  String descriptionValue;
  double priceValue;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      child: ListView(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(labelText: 'Product Title'),
            onChanged: (String value) {
              setState(() {
                titleValue = value;
              });
            },
          ),
          TextField(...),
          TextField(...),
          SizedBox(
            height: 10.0,
          ),
          RaisedButton(
            child: Text('Save'),
            color: Theme.of(context).accentColor,
            //在MaterialApp下面的theme屬性定義的accentColor
            textColor: Colors.white,
            onPressed: () {
              final Map<String, dynamic> product = {
                'title': titleValue,
                'description': descriptionValue,
                'price': priceValue,
                'image': 'assets/food.jpg'
              };
              widget.addProduct(product);
              Navigator.pushReplacementNamed(context, '/');
            },
          )
        ],
      ),
    );
  }
}


主題來源:
Learn Flutter & Dart to Build iOS & Android Apps


上一篇
使用者輸入框
下一篇
做一個toggle按鈕以及為文字加新字體
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言