iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
0
Mobile Development

「Google Flutter」學習筆記系列 第 28

【Day 28】練習專案 1/2 - NFC、Barcode、fontFamily、Stack、sliding_up_panel

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


上一篇
【Day 27】arkit_flutter_plugin - AR擴充實境的專案
下一篇
【Day 29】練習專案 2/2 - Figma To Flutter
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言