[Flutter] 匯入（import）不同程式的 Class 來撰寫程式的方法

Last Updated on 2021-05-17 by Clay

不論是在開發什麼樣的 App，我們很難將所有的程式都放在一個主要的文件當中。一來這樣不好維護（每次要找不同功能的程式碼區塊都得費一番功夫）、二來這樣要添加新的功能並不容易（理由同上）。

所以，依照不同功能拆開程式碼的檔案，互相引用——這是非常必要的功能。所幸，在 Flutter 當中並沒有太複雜的引用機制，基本上只要在要引用的 Script 撰寫好要引用的 Class，便能直接 Import。

以下就來簡單紀錄該怎麼實踐。

若是對於 Flutter 的學習有興趣，可以參考官方的 Tutorial: https://flutter.dev/docs/reference/tutorials

若是想要安裝 Flutter 的 IDE，可以參考我之前寫過的《Flutter 學習心得筆記 (0) 下載 Intellij IDEA》。

那麼，以下我們就開始吧！

Import 寫好的程式

在我們建立的專案裡頭，Dart 撰寫的程式碼通常都放置於 "lib" 資料夾底下。假設我在 lib 資料夾底下有兩份檔案：page_01.dart 以及 page_02.dart。

我想要在 page_01.dart 當中引用 page_02.dart 寫好的程式，那麼兩個程式分別如下：

page_02.dart:

import 'package:flutter/material.dart';
class page02 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
    );
  }
}

這裡我定義了 page02 這個 Class，它將在手機螢幕上繪製 Container 的圖形，為了方便顯示，我將 Container 設定為紅色。

然後我們開始撰寫 page_01.dart：

import 'package:flutter/material.dart';
import 'package:new_test/page_02.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: page02(),
      ),
    );
  }
}

Output:

可以看到我最上方 import 的 package 甚至包含我當前專案（new_test）底下的 page_02.dart。這樣一來，我們就可以在程式進入點的 body 設定 page02() 這個在另外一個檔案中定義好的、包含紅色 Container 的界面。