今日要点
》前言
》介绍 Demo 专案
》程序架构研究

前言

前面精选了很多在 Github 上很多高手写的专案，都很值得我继续研究学习。接下来2几天，记录一下我的第一个 Flutter 专案。这是我接解触 Flutter 一个星期後完成的，虽然後面没有再继续写下去，但对 Flutter 感到更有兴趣了。因为很阳春，所以内容不多，纯綷记录一下。

介绍 Demo 专案

这是一个 Demo 专案，他的功能很简单，取得会员资料，取得的方式可以是扫描一个会员条码，或用 nfc 去感应会员，或直接输入会员卡编号。之後显示会员资料，然後记录会员这次要领取的记念品，并印出收据。

因为是公司内部使用，所以要求画面不要太花俏，刚好我刚学也还没法设计的太复杂，所以看起来就是单纯的资料表格。有把字型换一下，比预设的字型好看一点。

主要的画面。

画面的布局如下：

• APP Bar
• 登入资讯
• 会员资讯
• 读取会员卡
• 领取记念品

NFC扫描的画面。

Barcode扫描的画面。

领取记念品的画面。

程序架构研究

程序就先列一下重点的地方

专案用到 plugin
以下是我专案用到的 plugin

pubspec.yaml

  cupertino_icons: ^0.1.3
  auto_size_text: ^2.1.0      
  flutter_nfc_reader: ^0.1.0  
  provider: ^4.3.1            
  flutter_barcode_scanner: any 
  sliding_up_panel: ^1.0.2       
  printing: ^3.5.0            
  pdf: ^1.9.0       
  fdottedline: ^1.0.1 

main.dart 主要是在 runApp 里把 providers 加进来。

  runApp(
    MultiProvider(
      providers: [
        Provider<int>.value(value: textSize),
        Provider<String>.value(value: 'jason test'),
        ChangeNotifierProvider(create: (_) => CounterModel()),
        ChangeNotifierProvider(create: (_) => MyGlobalModel()),
        ChangeNotifierProvider(create: (_) => TicketSelectButtonModel()),
        ChangeNotifierProvider(create: (_) => UserInfoModel()),
        ChangeNotifierProvider(create: (_) => TestDataModel()),
      ],
      child: MyApp(),
    ),
  );

画面的布局

• 因为有些栏位要跟其他画面共用，所以把资料栏位切成二个 Widget 来存放
• 再来是一个扫描按键面版的 Widget
• 最後是领取认念品的按键

今天就先这样罗

第 28 天写完.