【Day 04】製作第一個app

16th鐵人賽

nny02426

2024-09-18 22:39:45

132 瀏覽

分享至

今天，筆者將跟著google所製作的教學一起學習製作人生中第一個App：一個簡單，隨機選擇兩個英文文字並將他們合併，且使用者可以儲存喜歡的生成詞語。當然，因為是使用Flutter製作的，所以能夠在Android, Web, Linux等平台上運作。
本篇裡，筆者將使用NeoVim實做，並會記下自己的過程，供大家參考。
Codelab教學連結

前製準備

選擇編輯器
常見的幾個選項：VS Code, Android Studio, IntelliJ IDE都適合用於編輯，筆者出於自身習慣，選擇使用Neovim，並用了nvim-flutter/flutter-tools.nvim這個plugin。
選擇應用程式主要使用平台
官方建議可以先選好主要使用者在的平台，像是Android等，而這可以由將裝置與電腦連線（由usb線等方式），並於開發時的flutter device設定目標平台。
使用Web作為目標平台在開發時固然方便，但Web不支援即時更新我們在程式碼中做的變動，這點須注意。
下載安裝Flutter SDK
可以參考筆者的前一篇文與官方說明文件

建立新專案

首先，在Terminal中輸入以下程式碼，以建立一個全新的專案。專案名字可以自行依心情設定。

flutter create first_app

如同上次我們建立測試執行檔test_drive，此時它也幫我們建立好一個名為first_app的資料夾。資料夾的結構如下：

圖片中所開啟的檔案lib/main.dart便是我們專案主要編輯的檔案。

專案基本資訊：pubspec.yaml

pubspec.yaml存有著我們所編輯中專案的一些基本資訊，如名稱、版本、所需資料庫等等的內容。
為了增加我們應用程式中所有的英文單字，我們需要到此檔案中更改一些設定。
到檔案中dependencies（第30行）項增加英文單字的packages：

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

分析器設定：analysis_options.yaml

此檔案適用於設定Flutter在分析我們的檔案時所需要的一些規則，現在所條的設定十分寬鬆，考量到這是我們的第一次實做，之後隨時都可以更改這裡的設定，將它變得更嚴謹。
我們開啟analysis_options.yaml，增加一些linter rules：

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    avoid_print: false
    prefer_const_constructors_in_immutables: false
    prefer_const_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_final_fields: false
    unnecessary_breaks: true
    use_key_in_widget_constructors: false

設定main.dart

在開始編輯main.dart之前，可以先跑一次flutter test，這會測試我們更改yaml檔後程式是否可以正確執行，並下載剛剛於pubspec.yaml檔增加的packages，方便我們編輯時的autocompletion運作。

應用程式基底

開啟我們的lib/main.dart，並將檔案中的程式碼由以下內容取代：

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(  //sets the theme/look of the app
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

p.s. 此時如果我們去執行flutter test做測試，會顯示出：Conter increments smoke test Test faild.，但使用flutter run卻能夠正常執行，可以想想看是為什麼呢～

建立按鈕

我們來建立一個用於生成下一組隨機詞組的按鈕：Next
在main.dart檔案最下方class MyHomePage的Scaffold中增加ElevatedButton，如下方所示：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),

          ElevatedButton(onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          )
        ],
      ),
    );
  }
}

我們此時執行flutter run時，便能看到我們的小程式有了個按鈕，每次按了按鈕，雖然在應用程式的界面上看不到什麼改變，但在__FLUTTER_DEV_LOG__中都會印出'button pressed!'的字樣。

增加按鈕功能

想給我們的按鈕增加功能，我們要在class MyAppState extends ChangeNotifier中增加一個函式：getNext()，顧名思義，就是獲得下一個詞組。

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

我們還需要讓按鈕被按下時呼叫函式。記得我們在前面建立按鈕時讓它被按下時印出'button pressed!'嗎？此時，我們只需要在那行之上呼叫appState.getNext()，便能夠顯示下一個隨機詞組。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),

          ElevatedButton(onPressed: () {
              appState.getNext();
              print('button pressed!');
            },
            child: Text('Next'),
          )
        ],
      ),
    );
  }
}