今日要點
》前言
》介紹 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 天寫完.