Flutter App 2 - Landrop App Interface Imitation

這次的話是第二次的 Flutter 課程作業，作業可以兩個挑一個，一個是打造吸睛的 about 頁面，一個是模仿上架的 App，個人因為 about page 不知道要做什麼，而且本人有 Windows 電腦，所以一直都要面對需要將 iPhone 檔案傳至 Windows 電腦的狀況，後來遇到了一個 Youtuber 推薦了 Landrop App，讓使用者可以輕鬆跨平台傳送檔案，個人用了也覺得非常不錯，所以這次作業就決定模仿一下 Landrop App 的介面。

而這次的作業雖然是只要一個頁面就好，但…因為作業規定必須使用的 widget 中有一個 widget 在僅模仿一個 page 的狀況下無法做到，故這次基本上把三個 tab 量的 page 全部刻了。

Original App Interface#

My App Interface#

iOS (Device: iPhone 12 Pro Max)#

Android (Device: Sony Xperia XZ2 Premium, Lineage OS 21)#

Directory Structure#

首先來看這次資料夾結構的部分，因為這次元件量其實是不少的，所以這次只好在目前上課還沒教到的狀況下，直接開始對所有的專案檔案進行分類存放。資料夾分類如下：

Components：放置小型元件 (e.g. Circle IconButton, ListTile Card)
Pages：放置頁面 (那些真正完整的頁面)
Types：放置類型 (e.g. custom enumerations)
Widgets：放置頁面上部分體積較大的 widget
Directory Structure

Code Explanation#

NOTE
以下 collapsed lines 請不用展開，程式碼部分稍後全部都會進行解析，折疊部分之所以摺疊起來是希望各位在閱讀時可以先專注於特定部分，而不是與分析無關或重複的部分。

Base#

首先是基底的部分，我們要先建立 App 的根 Widget：

1
import 'package:flutter/material.dart';
3 collapsed lines
2
import 'Pages/FilesPage.dart';
3
import 'Pages/HomePage.dart';
4
import 'Pages/SettingsPage.dart';
5

6
void main() {
7
  runApp(const MyApp());
8
}
9

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

13
  // This widget is the root of your application.
14
  @override
15
  Widget build(BuildContext context) {
16
    return MaterialApp(
17
      debugShowCheckedModeBanner: false,
18
      title: 'LanDrop',
19
      theme: ThemeData(
20
        useMaterial3: true,
21
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
10 collapsed lines
22
        menuTheme: const MenuThemeData(
23
          style: MenuStyle(
24
            shape: WidgetStatePropertyAll(
25
              RoundedRectangleBorder(
26
                borderRadius: BorderRadius.all(Radius.circular(10)),
27
              ),
28
            ),
29
            backgroundColor: WidgetStatePropertyAll(Colors.white),
30
          ),
31
        ),
32
      ),
33
      home: const NavigationWidget(),
34
    );
35
  }
36
}
37

50 collapsed lines
38
class NavigationWidget extends StatefulWidget {
39
  const NavigationWidget({super.key});
40

41
  @override
42
  State<NavigationWidget> createState() => _NavigationWidgetState();
43
}
44

45
class _NavigationWidgetState extends State<NavigationWidget> {
46
  int currentPageIndex = 0;
47

48
  @override
49
  Widget build(BuildContext context) {
50
    return Scaffold(
51
      bottomNavigationBar: NavigationBar(
52
        onDestinationSelected: (int index) {
53
          setState(() {
54
            currentPageIndex = index;
55
          });
56
        },
57
        indicatorColor: Colors.lightBlueAccent.shade100,
58
        selectedIndex: currentPageIndex,
59
        destinations: const <Widget>[
60
          NavigationDestination(
61
            selectedIcon: Icon(Icons.home),
62
            icon: Icon(Icons.home_outlined),
63
            label: 'Home',
64
          ),
65
          NavigationDestination(
66
            selectedIcon: Icon(Icons.folder),
67
            icon: Icon(Icons.folder_outlined),
68
            label: 'Files',
69
          ),
70
          NavigationDestination(
71
            selectedIcon: Icon(Icons.settings),
72
            icon: Icon(Icons.settings_outlined),
73
            label: 'Settings',
74
          ),
75
        ],
76
      ),
77
      body: SafeArea(
78
        child:
79
            <Widget>[
80
              const HomePage(),
81
              const FilesPage(),
82
              const SettingsPage(),
83
            ][currentPageIndex],
84
      ),
85
    );
86
  }
87
}

注意第 17 行，該行可以在 App 處於 debug 模式下，關閉畫面右上角的 debug 標籤。

其餘部分的話就是設定主題，例如顏色、標題等。

AppBar & PageView#

再來就是底部的 AppBar。


1 collapsed line
1
import 'package:flutter/material.dart';
2
import 'Pages/FilesPage.dart';
3
import 'Pages/HomePage.dart';
4
import 'Pages/SettingsPage.dart';
5

31 collapsed lines
6
void main() {
7
  runApp(const MyApp());
8
}
9

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

13
  // This widget is the root of your application.
14
  @override
15
  Widget build(BuildContext context) {
16
    return MaterialApp(
17
      debugShowCheckedModeBanner: false,
18
      title: 'LanDrop',
19
      theme: ThemeData(
20
        useMaterial3: true,
21
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
22
        menuTheme: const MenuThemeData(
23
          style: MenuStyle(
24
            shape: WidgetStatePropertyAll(
25
              RoundedRectangleBorder(
26
                borderRadius: BorderRadius.all(Radius.circular(10)),
27
              ),
28
            ),
29
            backgroundColor: WidgetStatePropertyAll(Colors.white),
30
          ),
31
        ),
32
      ),
33
      home: const NavigationWidget(),
34
    );
35
  }
36
}
37

38
class NavigationWidget extends StatefulWidget {
39
  const NavigationWidget({super.key});
40

41
  @override
42
  State<NavigationWidget> createState() => _NavigationWidgetState();
43
}
44

45
class _NavigationWidgetState extends State<NavigationWidget> {
46
  int currentPageIndex = 0;
47

48
  @override
49
  Widget build(BuildContext context) {
50
    return Scaffold(
51
      bottomNavigationBar: NavigationBar(
52
        onDestinationSelected: (int index) {
53
          setState(() {
54
            currentPageIndex = index;
55
          });
56
        },
57
        indicatorColor: Colors.lightBlueAccent.shade100,
58
        selectedIndex: currentPageIndex,
59
        destinations: const <Widget>[
60
          NavigationDestination(
61
            selectedIcon: Icon(Icons.home),
62
            icon: Icon(Icons.home_outlined),
63
            label: 'Home',
64
          ),
65
          NavigationDestination(
66
            selectedIcon: Icon(Icons.folder),
67
            icon: Icon(Icons.folder_outlined),
68
            label: 'Files',
69
          ),
70
          NavigationDestination(
71
            selectedIcon: Icon(Icons.settings),
72
            icon: Icon(Icons.settings_outlined),
73
            label: 'Settings',
74
          ),
75
        ],
76
      ),
77
      body: SafeArea(
78
        child:
79
            <Widget>[
80
              const HomePage(),
81
              const FilesPage(),
82
              const SettingsPage(),
83
            ][currentPageIndex],
84
      ),
85
    );
86
  }
87
}

解析
因為需要記錄目前所在的頁面，所以其必須為 StatefulWidget。
接下來就是透過 Scaffold 的 bottomNavigationBar 屬性，在頁面中加入 AppBar，AppBar 部分使用 NavigationBar widget 建立。
在 52~56 行的部分是設定當使用者點選 bar 上的按鈕時，會切換頁面。
而 59~75 的部分是設定在 NavigationBar 上會顯示的頁面切換按鈕。
最後 77~84 是設定顯示頁面主體，這裡透過 SafeArea widget 包裝，確保頁面內容不會被系統元件遮擋。然後透過 currentPageIndex 來決定顯示哪個頁面。

Home#

首頁頁面的部分，位於 Pages/HomePage.dart

1
import 'package:flutter/material.dart';
2

3
import '../Widgets/Home/TopBar.dart';
4
import '../Widgets/Home/Devices.dart';
5
import '../Widgets/Home/NearbyDevices.dart';
6
import '../Widgets/Home/Send.dart';
7
import '../Widgets/Home/Transfers.dart';
8

9
class HomePage extends StatelessWidget {
10
  const HomePage({super.key});
11

12
  @override
13
  Widget build(BuildContext context) {
14
    return Padding(
15
      padding: const EdgeInsets.only(left: 30.0, right: 30.0),
16
      child: Column(
17
        children: [
18
          Topbar(),
19
          Expanded(
20
            child: SingleChildScrollView(
21
              child: Column(
22
                children: [Send(), Devices(), NearbyDevices(), Transfers()],
23
              ),
24
            ),
25
          ),
26
        ],
27
      ),
28
    );
29
  }
30
}

解析
設定與螢幕邊界的距離。
使用 SingleChildScrollView 包裝，使其子 widget 可以滾動。請注意外部必須有 Expanded widget 包裝，否則無法正常顯示。

接下來就是各個 Widget，全數皆在 Widgets/Home 資料夾中。

首先是 TopBar 部分，用於顯示 TopBar 區塊的版面。

1
import 'package:device_friendly_name/device_friendly_name.dart';
2
import 'package:flutter/material.dart';
3

4
class Topbar extends StatefulWidget {
5
  const Topbar({super.key});
6

7
  @override
8
  State<Topbar> createState() => _TopbarState();
9
}
10

11
class _TopbarState extends State<Topbar> {
12
  Future<String> _getDeviceName() async {
13
    final String deviceName =
14
        await DeviceFriendlyName().getDeviceFriendlyName() ?? "User";
15
    return deviceName;
16
  }
17

18
  bool discoverTurnedOn = true;
19

20
  @override
21
  Widget build(BuildContext context) {
22
    return Padding(
23
      padding: const EdgeInsets.only(top: 20.0),
24
      child: Row(
25
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
26
        children: [
27
          FutureBuilder(
28
            future: _getDeviceName(),
29
            builder: (context, snapshot) {
30
              if (snapshot.hasData) {
31
                return SizedBox(
32
                  width: MediaQuery.of(context).size.width * 0.6,
33
                  child: Text(
34
                    "Hello ${snapshot.data} 👋",
35
                    style: TextStyle(fontSize: 24),
36
                    overflow: TextOverflow.ellipsis,
37
                    maxLines: 1,
38
                    softWrap: false,
39
                  ),
40
                );
41
              }
42
              return Text("Hello, User 👋", style: TextStyle(fontSize: 24));
43
            },
44
          ),
45
          IconButton(
46
            icon: Icon(
47
              discoverTurnedOn
48
                  ? Icons.wifi_tethering
49
                  : Icons.wifi_tethering_off,
50
            ),
51
            onPressed: () {
52
              setState(() {
53
                discoverTurnedOn = !discoverTurnedOn;
54
              });
55
            },
56
          ),
57
        ],
58
      ),
59
    );
60
  }
61
}

因為 device_friendly_name 模組需要透過非同步的方式去抓取裝置名稱，故需要使用 StatefulWidget 和 FutureBuilder，透過非同步的方式，將裝置名稱顯示在畫面上，且由於避免裝置名稱過長造成 widget 溢出，故顯示裝置名稱的 widget 需要使用 SizedBox 包起來，並指定當長度超過螢幕寬度的 60% 時將內容自動截斷。間隔部分只設定頂部間隔，因為左右已經在 HomePage 中設定。

其次是 Send 部分，用於顯示 Send 區塊的版面。

1
import 'package:flutter/material.dart';
2
import '../../Components/CircleButton.dart';
3

4
class Send extends StatelessWidget {
5
  const Send({super.key});
6

7
  @override
8
  Widget build(BuildContext context) {
9
    return Padding(
10
      padding: const EdgeInsets.only(top: 30.0),
11
      child: Column(
12
        crossAxisAlignment: CrossAxisAlignment.start,
13
        children: [
14
          Text(
15
            "Send",
16
            style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
17
          ),
18
          SizedBox(height: 20),
19
          Row(
20
            mainAxisAlignment: MainAxisAlignment.spaceAround,
21
            children: [
22
              CircleButton(
23
                backgroundColor: Colors.tealAccent,
24
                iconColor: Colors.teal,
25
                icon: Icons.description_outlined,
26
                text: "Files",
27
              ),
18 collapsed lines
28
              CircleButton(
29
                backgroundColor: Colors.blueAccent,
30
                iconColor: Colors.blue,
31
                icon: Icons.photo_outlined,
32
                text: "Photos",
33
              ),
34
              CircleButton(
35
                backgroundColor: Colors.pinkAccent,
36
                iconColor: Colors.pink,
37
                icon: Icons.article_outlined,
38
                text: "Text",
39
              ),
40
              CircleButton(
41
                backgroundColor: Colors.purpleAccent,
42
                iconColor: Colors.purple,
43
                icon: Icons.topic_outlined,
44
                text: "Folder",
45
              ),
46
            ],
47
          ),
48
        ],
49
      ),
50
    );
51
  }
52
}

按鈕的部分是採用 Row 來進行排版，而中間間隔的部分則交由 Row 自行去計算，讓按鈕間隔在不同裝置上看起來都舒適，CircleButton 為 custom component，稍後會展示。

其次是 Devices 部分，用於顯示 Devices 區塊的版面。

1
import 'package:flutter/material.dart';
2

3
import '../../Components/CircleButton.dart';
4

5
class Devices extends StatelessWidget {
6
  const Devices({super.key});
7

8
  @override
9
  Widget build(BuildContext context) {
10
    return Padding(
11
      padding: const EdgeInsets.only(top: 30.0),
12
      child: Column(
13
        crossAxisAlignment: CrossAxisAlignment.start,
14
        children: [
15
          Row(
16
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
17
            children: [
18
              Text(
19
                "Devices",
20
                style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
21
              ),
22
              MenuAnchor(
23
                menuChildren: <Widget>[
24
                  MenuItemButton(
25
                    leadingIcon: Icon(Icons.public),
26
                    onPressed: () {},
27
                    child: Text("Add via IP & Port"),
28
                  ),
29
                ],
30
                builder: (context, controller, child) {
31
                  return IconButton(
32
                    onPressed: () {
33
                      if (controller.isOpen) {
34
                        controller.close();
35
                      } else {
36
                        controller.open();
37
                      }
38
                    },
39
                    icon: Icon(Icons.add),
40
                  );
41
                },
42
              ),
43
            ],
44
          ),
45
          SizedBox(height: 5),
46
          Row(
47
            crossAxisAlignment: CrossAxisAlignment.start,
48
            children: [
49
              CircleButton(
50
                backgroundColor: Colors.amberAccent,
51
                iconColor: Colors.amber,
52
                icon: Icons.computer_outlined,
53
                text: "Aaron's MacBook",
54
              ),
55
              SizedBox(width: 20),
56
              CircleButton(
57
                backgroundColor: Colors.blueAccent,
58
                iconColor: Colors.blue,
59
                icon: Icons.phone_iphone_outlined,
60
                text: "iPhone",
61
              ),
62
            ],
63
          ),
64
        ],
65
      ),
66
    );
67
  }
68
}

因為按鈕與文字所在位置分別為頭和尾，故可以維持使用 Row 佈局，以達到更好的版面效果。而 MenuAnchor 的部分是下拉式選單，因為有設定偏好 Material 3 的風格，所以使用 MenuAnchor。而關於外觀的部分則已經在 main.dart 中設定：


18 collapsed lines
1
import 'package:flutter/material.dart';
2
import 'Pages/FilesPage.dart';
3
import 'Pages/HomePage.dart';
4
import 'Pages/SettingsPage.dart';
5

6
void main() {
7
  runApp(const MyApp());
8
}
9

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

13
  // This widget is the root of your application.
14
  @override
15
  Widget build(BuildContext context) {
16
    return MaterialApp(
17
      debugShowCheckedModeBanner: false,
18
      title: 'LanDrop',
19
      theme: ThemeData(
20
        useMaterial3: true,
21
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
22
        menuTheme: const MenuThemeData(
23
          style: MenuStyle(
24
            shape: WidgetStatePropertyAll(
25
              RoundedRectangleBorder(
26
                borderRadius: BorderRadius.all(Radius.circular(10)),
27
              ),
28
            ),
29
            backgroundColor: WidgetStatePropertyAll(Colors.white),
30
          ),
31
        ),
32
      ),
55 collapsed lines
33
      home: const NavigationWidget(),
34
    );
35
  }
36
}
37

38
class NavigationWidget extends StatefulWidget {
39
  const NavigationWidget({super.key});
40

41
  @override
42
  State<NavigationWidget> createState() => _NavigationWidgetState();
43
}
44

45
class _NavigationWidgetState extends State<NavigationWidget> {
46
  int currentPageIndex = 0;
47

48
  @override
49
  Widget build(BuildContext context) {
50
    return Scaffold(
51
      bottomNavigationBar: NavigationBar(
52
        onDestinationSelected: (int index) {
53
          setState(() {
54
            currentPageIndex = index;
55
          });
56
        },
57
        indicatorColor: Colors.lightBlueAccent.shade100,
58
        selectedIndex: currentPageIndex,
59
        destinations: const <Widget>[
60
          NavigationDestination(
61
            selectedIcon: Icon(Icons.home),
62
            icon: Icon(Icons.home_outlined),
63
            label: 'Home',
64
          ),
65
          NavigationDestination(
66
            selectedIcon: Icon(Icons.folder),
67
            icon: Icon(Icons.folder_outlined),
68
            label: 'Files',
69
          ),
70
          NavigationDestination(
71
            selectedIcon: Icon(Icons.settings),
72
            icon: Icon(Icons.settings_outlined),
73
            label: 'Settings',
74
          ),
75
        ],
76
      ),
77
      body: SafeArea(
78
        child:
79
            <Widget>[
80
              const HomePage(),
81
              const FilesPage(),
82
              const SettingsPage(),
83
            ][currentPageIndex],
84
      ),
85
    );
86
  }
87
}

其次是 NearbyDevices 部分，用於顯示 NearbyDevices 區塊的版面。

1
import 'package:flutter/material.dart';
2
import 'package:landroppage/Widgets/Home/ModalBottomSheet.dart';
3

4
import '../../Components/CircleButton.dart';
5

6
class NearbyDevices extends StatelessWidget {
7
  const NearbyDevices({super.key});
8

9
  @override
10
  Widget build(BuildContext context) {
11
    return Padding(
12
      padding: const EdgeInsets.only(top: 10.0),
13
      child: Column(
14
        crossAxisAlignment: CrossAxisAlignment.start,
15
        children: [
16
          Row(
17
            mainAxisAlignment: MainAxisAlignment.start,
18
            children: [
19
              Text(
20
                "Nearby Devices",
21
                style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
22
              ),
23
              Transform.scale(
24
                scale: 0.7,
25
                child: IconButton(
26
                  onPressed: () {
27
                    showModalBottomSheet(
28
                      context: context,
29
                      builder: (BuildContext content) {
30
                        return ModalBottomSheet();
31
                      },
32
                    );
33
                  },
34
                  icon: Icon(Icons.chevron_right),
35
                ),
36
              ),
37
              Badge(
38
                label: Text("BETA"),
39
                backgroundColor: Colors.blueAccent,
40
                textColor: Colors.white,
41
                padding: EdgeInsets.symmetric(horizontal: 8),
42
              ),
43
            ],
44
          ),
45
          SizedBox(height: 5),
46
          Row(
47
            crossAxisAlignment: CrossAxisAlignment.start,
48
            children: [
49
              CircleButton(
50
                backgroundColor: Colors.redAccent,
51
                iconColor: Colors.red,
52
                icon: Icons.phone_android_outlined,
53
                text: "Phone",
54
              ),
55
              SizedBox(width: 20),
56
              CircleButton(
57
                backgroundColor: Colors.greenAccent,
58
                iconColor: Colors.green,
59
                icon: Icons.tablet_android_outlined,
60
                text: "Tablet",
61
              ),
62
            ],
63
          ),
64
        ],
65
      ),
66
    );
67
  }
68
}

解析
26~33 行：在使用者按下按鈕後，會從畫面底部彈出一個 dialog，顯示關於該功能的一些資訊。
30 行的 ModalBottomSheet 稍後會展示

再來是 Transfers 部分，用於顯示 Transfers 區塊的版面。

1
import 'package:flutter/material.dart';
2

3
import '../../Components/TransferItem.dart';
4
import '../../Types/TransferStatus.dart';
5

6
class Transfers extends StatelessWidget {
7
  const Transfers({super.key});
8

9
  @override
10
  Widget build(BuildContext context) {
11
    return Padding(
12
      padding: const EdgeInsets.only(top: 20.0, bottom: 20),
13
      child: Column(
14
        crossAxisAlignment: CrossAxisAlignment.start,
15
        children: [
16
          Row(
17
            mainAxisAlignment: MainAxisAlignment.start,
18
            children: [
19
              Text(
20
                "Transfers",
21
                style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
22
              ),
23
            ],
24
          ),
25
          SizedBox(height: 20),
26
          ListView(
27
            shrinkWrap: true,
28
            physics: NeverScrollableScrollPhysics(),
29
            children: [
30
              TransferItem(
31
                name: "IMG_5868.jpeg",
32
                size: "111.55KB",
33
                status: TransferStatus.Done,
34
                code: "947839",
35
                device: "iPhone",
36
                progress: 100,
37
              ),
40 collapsed lines
38
              TransferItem(
39
                name: "IMG_5869.jpeg",
40
                size: "123.45MB",
41
                status: TransferStatus.InProgress,
42
                code: "123456",
43
                device: "Aaron's Macbook",
44
                progress: 55,
45
              ),
46
              TransferItem(
47
                name: "ubuntu-24.04-arm.iso",
48
                size: "1.5GB",
49
                status: TransferStatus.Failed,
50
                code: "123456",
51
                device: "Aaron's Macbook",
52
                progress: 55,
53
              ),
54
              TransferItem(
55
                name: "Homework.docx",
56
                size: "456MB",
57
                status: TransferStatus.Done,
58
                code: "947839",
59
                device: "iPhone",
60
                progress: 100,
61
              ),
62
              TransferItem(
63
                name: "IMG_5890.png",
64
                size: "429.23MB",
65
                status: TransferStatus.Pending,
66
                code: "123456",
67
                device: "Aaron's Macbook",
68
                progress: 55,
69
              ),
70
              TransferItem(
71
                name: "Report.ppt",
72
                size: "372MB",
73
                status: TransferStatus.InProgress,
74
                code: "947839",
75
                device: "iPhone",
76
                progress: 40,
77
              ),
78
            ],
79
          ),
80
        ],
81
      ),
82
    );
83
  }
84
}

解析
12 行的 bottom 部分是使畫面完全滑到底時，底部可以稍微留白，讓使用者看起來更舒服。
28 行的 NeverScrollableScrollPhysics() 是讓 ListView 不可滾動，因為在 parent widget 中已經在外層套了 SingleChildScrollView，這裡得設定不能滾動。

最後是 ModalBottomSheet，用於在點擊 Nearby Device 旁邊按鈕時，可以顯示關於此功能的底部 Dialog

1
import 'package:flutter/material.dart';
2

3
class ModalBottomSheet extends StatelessWidget {
4
  const ModalBottomSheet({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return SizedBox(
9
      height: 220,
10
      child: Padding(
11
        padding: EdgeInsets.only(top: 20, left: 30, right: 30, bottom: 20),
12
        child: Column(
13
          mainAxisAlignment: MainAxisAlignment.start,
14
          children: [
15
            Row(
16
              mainAxisAlignment: MainAxisAlignment.start,
17
              children: [
18
                Text("Nearby Devices", style: TextStyle(fontSize: 24)),
19
                SizedBox(width: 10),
20
                Badge(
21
                  label: Text("BETA"),
22
                  backgroundColor: Colors.blueAccent,
23
                  textColor: Colors.white,
24
                  padding: EdgeInsets.symmetric(horizontal: 8),
25
                ),
26
              ],
27
            ),
28
            SizedBox(height: 20),
29
            Expanded(
30
              child: Text(
31
                "You can now send files to nearby devices, even if you're not connected to the same Wi-Fi network.",
32
                style: TextStyle(
33
                  fontSize: 14,
34
                  color: Colors.grey.shade600,
35
                  fontWeight: FontWeight.w600,
36
                ),
37
              ),
38
            ),
39
            Expanded(
40
              child: Text(
41
                "Heads up: If you're not connected to any Wi-Fi network and are using cellular data, be mindful of potential data charges.",
42
                style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
43
              ),
44
            ),
45
          ],
46
        ),
47
      ),
48
    );
49
  }
50
}

解析
因為要讓內容文字不會溢出，所以在內容文字部分外層需要加上 Expanded 讓文字可以自動換行顯示。

Files#

檔案頁面的部分，位於 Pages/FilesPage.dart。

由於整個不複雜，故沒有將 widget 拆成不同檔案。

1
import 'package:flutter/material.dart';
2

3
import '../Components/FileItem.dart';
4

5
class FilesPage extends StatelessWidget {
6
  const FilesPage({super.key});
7

8
  @override
9
  Widget build(BuildContext context) {
10
    return Padding(
11
      padding: const EdgeInsets.only(left: 36.0, right: 36.0),
12
      child: Column(
13
        children: [
14
          const Padding(
15
            padding: EdgeInsets.only(top: 20.0),
16
            child: Row(
17
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
18
              children: [Text("Files", style: TextStyle(fontSize: 24))],
19
            ),
20
          ),
21
          Padding(
22
            padding: const EdgeInsets.only(top: 25),
23
            child: Stack(
24
              alignment: Alignment.center,
25
              children: [
26
                Align(
27
                  alignment: Alignment.center,
28
                  child: Row(
29
                    mainAxisSize: MainAxisSize.min,
30
                    children: const [
31
                      Icon(Icons.folder_rounded, color: Colors.amber, size: 20),
32
                      SizedBox(width: 5),
33
                      Text("Documents", style: TextStyle(fontSize: 18)),
34
                    ],
35
                  ),
36
                ),
37
                Positioned(
38
                  right: 28,
39
                  child: MenuAnchor(
40
                    menuChildren: <Widget>[
41
                      MenuItemButton(
42
                        leadingIcon: const Icon(
43
                          Icons.delete_outline_rounded,
44
                          color: Colors.red,
45
                        ),
46
                        onPressed: () {},
47
                        child: const Text(
48
                          "Delete All Files",
49
                          style: TextStyle(color: Colors.red),
50
                        ),
51
                      ),
52
                    ],
53
                    builder: (context, controller, child) {
54
                      return IconButton(
55
                        icon: const Icon(Icons.more_horiz_rounded),
56
                        onPressed: () {
57
                          if (controller.isOpen) {
58
                            controller.close();
59
                          } else {
60
                            controller.open();
61
                          }
62
                        },
63
                      );
64
                    },
65
                  ),
66
                ),
67
              ],
68
            ),
69
          ),
70
          Expanded(
71
            child: ListView(
72
              padding: const EdgeInsets.only(top: 20, bottom: 20),
73
              children: [
74
                FileItem(
75
                  name: "IMG_5868.jpeg",
76
                  size: "111.55KB",
77
                  time: DateTime.parse("2025-03-05T17:22:41+08:00"),
78
                ),
45 collapsed lines
79
                FileItem(
80
                  name: "Homework.docs",
81
                  size: "456MB",
82
                  time: DateTime.parse("2025-03-04T09:22:41+08:00"),
83
                ),
84
                FileItem(
85
                  name: "Windows11.iso",
86
                  size: "5.4GB",
87
                  time: DateTime.parse("2025-03-02T09:56:41+08:00"),
88
                ),
89
                FileItem(
90
                  name: "IMG_5867.jpeg",
91
                  size: "12MB",
92
                  time: DateTime.parse("2025-02-26T09:00:03+08:00"),
93
                ),
94
                FileItem(
95
                  name: "Fortuna for Tuna.zip",
96
                  size: "5.4MB",
97
                  time: DateTime.parse("2025-02-23T16:08:47+08:00"),
98
                ),
99
                FileItem(
100
                  name: "Cutter.rar",
101
                  size: "2.5MB",
102
                  time: DateTime.parse("2025-01-31T20:34:26+08:00"),
103
                ),
104
                FileItem(
105
                  name: "Programming Language.zip",
106
                  size: "1GB",
107
                  time: DateTime.parse("2024-12-31T15:00:26+08:00"),
108
                ),
109
                FileItem(
110
                  name: "zed-darwin.dmg",
111
                  size: "328.03MB",
112
                  time: DateTime.parse("2024-12-17T09:36:13+08:00"),
113
                ),
114
                FileItem(
115
                  name: "vscodium-Mac-arm64.dmg",
116
                  size: "147.03MB",
117
                  time: DateTime.parse("2024-12-13T22:16:47+08:00"),
118
                ),
119
                FileItem(
120
                  name: "clop-apple-arm.dmg",
121
                  size: "326.93MB",
122
                  time: DateTime.parse("2024-12-09T17:08:15+08:00"),
123
                ),
124
              ],
125
            ),
126
          ),
127
        ],
128
      ),
129
    );
130
  }
131
}

解析
因為一個 widget 在中間，另一個在右側，故個人感覺相較於使用 SizedBox 和 Row，用 Stack 是比較好的選擇，因為位置會比較精準。
因為是固定在正中間，所以用 Align 來進行定位，因為 Stack 大小不知道。
因為知道確切的位置，所以可以使用 Positioned 進行定位，而下拉式選單按鈕一樣使用 MenuAnchor。

Settings#

設定頁面的部分，位於 Pages/SettingsPage.dart。

1
import 'package:flutter/material.dart';
2
import 'package:landroppage/Types/Language.dart';
3

4
import '../Components/SettingsList.dart';
5
import '../Widgets/Settings/UserInfo.dart';
6

7
class SettingsPage extends StatefulWidget {
8
  const SettingsPage({super.key});
9

10
  @override
11
  State<SettingsPage> createState() => _SettingsPageState();
12
}
13

14
class _SettingsPageState extends State<SettingsPage> {
15
  bool discoverable = true;
16
  bool saveToGallery = true;
17
  ThemeMode themeMode = ThemeMode.system;
18
  Language language = Language.Auto;
19

20
  @override
21
  Widget build(BuildContext context) {
22
    return Padding(
23
      padding: EdgeInsets.only(left: 36.0, right: 36.0, bottom: 20.0),
24
      child: Column(
25
        children: [
26
          const Padding(
27
            padding: EdgeInsets.only(top: 20.0),
28
            child: Row(
29
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
30
              children: [Text("Settings", style: TextStyle(fontSize: 24))],
31
            ),
32
          ),
33
          Expanded(
34
            child: SingleChildScrollView(
35
              child: Column(
36
                children: [
37
                  UserInfo(),
38
                  SettingsList(
39
                    category: "General",
40
                    settings: [
41
                      ListTile(
42
                        leading: Icon(Icons.visibility),
43
                        title: Text("Discoverable"),
44
                        trailing: Switch(
45
                          value: discoverable,
46
                          onChanged: (value) {
47
                            setState(() {
48
                              discoverable = value;
49
                            });
50
                          },
51
                        ),
52
                      ),
12 collapsed lines
53
                      ListTile(
54
                        leading: Icon(Icons.photo_library),
55
                        title: Text("Save to Gallery"),
56
                        trailing: Switch(
57
                          value: saveToGallery,
58
                          onChanged: (value) {
59
                            setState(() {
60
                              saveToGallery = value;
61
                            });
62
                          },
63
                        ),
64
                      ),
65
                      ListTile(
66
                        leading: Icon(Icons.brightness_medium),
67
                        title: Text("Theme Mode"),
68
                        trailing: DropdownButton(
69
                          items: const [
70
                            DropdownMenuItem(
71
                              value: ThemeMode.system,
72
                              child: Text("System"),
73
                            ),
74
                            DropdownMenuItem(
75
                              value: ThemeMode.light,
76
                              child: Text("Light"),
77
                            ),
78
                            DropdownMenuItem(
79
                              value: ThemeMode.dark,
80
                              child: Text("Dark"),
81
                            ),
82
                          ],
83
                          onChanged: (value) {
84
                            setState(() {
85
                              themeMode = value!;
86
                            });
87
                          },
88
                          value: themeMode,
89
                        ),
90
                      ),
30 collapsed lines
91
                      ListTile(
92
                        leading: Icon(Icons.public),
93
                        title: Text("Language"),
94
                        trailing: DropdownButton(
95
                          items: const [
96
                            DropdownMenuItem(
97
                              value: Language.Auto,
98
                              child: Text("Auto"),
99
                            ),
100
                            DropdownMenuItem(
101
                              value: Language.English,
102
                              child: Text("English"),
103
                            ),
104
                            DropdownMenuItem(
105
                              value: Language.SimplifiedChinese,
106
                              child: Text("简体中文"),
107
                            ),
108
                            DropdownMenuItem(
109
                              value: Language.TraditionalChinese,
110
                              child: Text("繁體中文"),
111
                            ),
112
                          ],
113
                          onChanged: (value) {
114
                            setState(() {
115
                              language = value!;
116
                            });
117
                          },
118
                          value: language,
119
                        ),
120
                      ),
121
                      ListTile(
122
                        leading: Icon(Icons.delete),
123
                        title: Text("Clear Cache"),
124
                        onTap: () {},
125
                      ),
126
                      ListTile(
127
                        leading: Icon(Icons.update),
128
                        title: Text("Check for Updates"),
129
                        onTap: () {},
130
                      ),
131
                    ],
132
                  ),
43 collapsed lines
133
                  SettingsList(
134
                    category: "Advanced",
135
                    settings: [
136
                      ListTile(
137
                        leading: Icon(Icons.devices),
138
                        title: Text("Manage Trusted Devices"),
139
                        trailing: Icon(Icons.chevron_right),
140
                        onTap: () {},
141
                      ),
142
                      ListTile(
143
                        leading: Icon(Icons.copy_outlined),
144
                        title: Text("Copy My Device ID"),
145
                        onTap: () {},
146
                      ),
147
                      ListTile(
148
                        leading: Icon(Icons.info_outline_rounded),
149
                        title: Text("IP Address & Port"),
150
                        onTap: () {},
151
                      ),
152
                    ],
153
                  ),
154
                  SettingsList(
155
                    category: "About",
156
                    settings: [
157
                      ListTile(
158
                        leading: Icon(Icons.feedback),
159
                        title: Text("Report Feedback"),
160
                        onTap: () {},
161
                      ),
162
                      ListTile(
163
                        leading: Icon(Icons.gpp_maybe),
164
                        title: Text("Privacy Policy"),
165
                        trailing: Icon(Icons.chevron_right),
166
                        onTap: () {},
167
                      ),
168
                      ListTile(
169
                        leading: Icon(Icons.info_rounded),
170
                        title: Text("About"),
171
                        trailing: Icon(Icons.chevron_right),
172
                        onTap: () {},
173
                      ),
174
                    ],
175
                  ),
176
                ],
177
              ),
178
            ),
179
          ),
180
        ],
181
      ),
182
    );
183
  }
184
}

解析
因為要記錄設定值，故需要使用 StatefulWidget
宣告 state 已儲存設定值，ThemeMode 和 Language 為 enumeration，分別表示顯示主題與顯示語言，稍後會展示。
因為要使部分 widget 可以滾動，故使用 SingleChildScrollView，以確保內容可以垂直滾動，Expanded 的部分也是一樣，如果不加會無法顯示。
兩個皆為自定義 widget/component，稍後皆會展示
DropdownButton 部分為下拉式選單，選項部分可透過 items 屬性填入，而 DropdownMenuItem 是下拉選單的選項。而最後 value 部分下拉式選單的值，並且與對應設定值綁定。

接下來就是 UserInfo，檔案在 Widgets/Settings 資料夾中。

1
import 'package:flutter/material.dart';
2
import 'package:device_friendly_name/device_friendly_name.dart';
3

4
class UserInfo extends StatefulWidget {
5
  const UserInfo({super.key});
6

7
  @override
8
  State<UserInfo> createState() => _UserInfoState();
9
}
10

11
class _UserInfoState extends State<UserInfo> {
12
  Future<String> _getDeviceName() async {
13
    final String deviceName =
14
        await DeviceFriendlyName().getDeviceFriendlyName() ?? "User";
15
    return deviceName;
16
  }
17

18
  @override
19
  Widget build(BuildContext context) {
20
    return Padding(
21
      padding: EdgeInsets.only(top: 25),
22
      child: Row(
23
        mainAxisAlignment: MainAxisAlignment.start,
24
        children: [
25
          CircleAvatar(
26
            backgroundColor: Colors.white,
27
            radius: 30,
28
            child: ClipOval(
29
              child: Image(image: AssetImage("assets/avatar.jpeg")),
30
            ),
31
          ),
32
          SizedBox(width: 20),
33
          FutureBuilder(
34
            future: _getDeviceName(),
35
            builder: (context, snapshot) {
36
              return Text(
37
                snapshot.hasData ? snapshot.data! : "User",
38
                style: TextStyle(fontSize: 20),
39
              );
40
            },
41
          ),
42
          IconButton(icon: Icon(Icons.edit_outlined), onPressed: () {}),
43
        ],
44
      ),
45
    );
46
  }
47
}

解析
跟 HomePage 中的 TopBar 一樣，因為要非同步取得裝置名稱，所以此 widget 一樣是 StatefulWidget。
因為要符合作業要求使用 Image widget，所以才使用這種寫法設定 CircleAvatar 中顯示的圖片，在普通狀況下直接將圖片資訊填入 CircleAvatar 的 backgroundImage 屬性即可，不需要寫得如此彆扭。

Components#

相關檔案皆放置於 Components 資料夾中

CircleButton#

用於顯示那些有顏色底且下方有按鈕描述的圓形 IconButton。

1
import 'package:flutter/material.dart';
2

3
class CircleButton extends StatelessWidget {
4
  const CircleButton({
5
    super.key,
6
    required this.backgroundColor,
7
    required this.iconColor,
8
    required this.icon,
9
    required this.text,
10
  });
11

12
  final MaterialAccentColor backgroundColor;
13
  final MaterialColor iconColor;
14
  final IconData icon;
15
  final String text;
16

17
  @override
18
  Widget build(BuildContext context) {
19
    return Column(
20
      children: [
21
        Container(
22
          width: 65,
23
          height: 65,
24
          decoration: BoxDecoration(
25
            shape: BoxShape.circle,
26
            color: backgroundColor.shade100.withAlpha(50),
27
          ),
28
          child: IconButton(
29
            icon: Icon(icon, color: iconColor.shade400),
30
            iconSize: 30,
31
            onPressed: () {},
32
          ),
33
        ),
34
        SizedBox(height: 8),
35
        SizedBox(
36
          width: 65,
37
          child: Text(
38
            text,
39
            style: TextStyle(fontSize: 12),
40
            textAlign: TextAlign.center,
41
            softWrap: true,
42
            overflow: TextOverflow.visible,
43
            maxLines: 2,
44
          ),
45
        ),
46
      ],
47
    );
48
  }
49
}

解析
因為要為 IconButton 加上一個有顏色的底，故外面需要包一個 Container，然後透過 decoration 屬性設定要加上的底色。
為避免讓按鈕的描述文字在非常長時影響到其他按鈕的位置，故使用 SizedBox 包住 Text，設定寬度為 65，並為 Text 加上相關屬性，這樣即使文字過長也會自動換行，不會影響其他按鈕的位置。

FileItem#

用於顯示檔案列表內的檔案資訊

1
import 'package:flutter/material.dart';
2
import 'package:intl/intl.dart';
3

4
class FileItem extends StatelessWidget {
5
  const FileItem({
6
    super.key,
7
    required this.name,
8
    required this.size,
9
    required this.time,
10
  });
11

12
  final String name;
13
  final String size;
14
  final DateTime time;
15

16
  @override
17
  Widget build(BuildContext context) {
18
    return Card.filled(
19
      clipBehavior: Clip.hardEdge,
20
      color: Colors.white,
21
      shape: RoundedRectangleBorder(
22
        borderRadius: BorderRadius.circular(20),
23
        side: BorderSide(color: Colors.grey.shade300),
24
      ),
25
      child: InkWell(
26
        onTap: () {},
27
        child: Padding(
28
          padding: EdgeInsets.only(top: 5, bottom: 5),
29
          child: ListTile(
30
            leading: Container(
31
              width: 50,
32
              height: 50,
33
              decoration: BoxDecoration(
34
                borderRadius: BorderRadius.circular(15),
35
                color: Colors.greenAccent.shade100.withAlpha(50),
36
              ),
37
              child: Icon(
38
                Icons.description_outlined,
39
                color: Colors.green,
40
                size: 30,
41
              ),
42
            ),
43
            title: Text(name, style: TextStyle(fontSize: 14)),
44
            subtitle: Text(
45
              "${(DateFormat.yMd().add_jm().format(time.toLocal()))} | $size",
46
              style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
47
            ),
48
            trailing: MenuAnchor(
49
              menuChildren: <Widget>[
50
                MenuItemButton(
51
                  leadingIcon: Icon(Icons.open_in_new),
52
                  onPressed: () {},
53
                  child: Text("Open with..."),
54
                ),
55
                MenuItemButton(
56
                  leadingIcon: Icon(
57
                    Icons.delete_outline_rounded,
58
                    color: Colors.red,
59
                  ),
60
                  onPressed: () {},
61
                  child: Text("Delete", style: TextStyle(color: Colors.red)),
62
                ),
63
              ],
64
              builder: (context, controller, child) {
65
                return IconButton(
66
                  onPressed: () {
67
                    if (controller.isOpen) {
68
                      controller.close();
69
                    } else {
70
                      controller.open();
71
                    }
72
                  },
73
                  icon: Icon(Icons.more_horiz, color: Colors.grey.shade600),
74
                );
75
              },
76
            ),
77
          ),
78
        ),
79
      ),
80
    );
81
  }
82
}

解析
因為下方有 InkWell，所以需要設定 clipBehavior 為 Clip.hardEdge，否則 InkWell 效果會看不到。
使用 InkWell 使 Card 被點擊時能有一個點擊效果，onTap 的 function 即使沒有要做什麼動作也不可省略，否則點擊時不會有任何效果。
使用第三方模組 intl 將日期時間格式化成字串，格式為 mm/dd/yyyy HH:mm PM/AM。

SettingsList#

用於顯示分類的設定列表

1
import 'package:flutter/material.dart';
2

3
class SettingsList extends StatelessWidget {
4
  const SettingsList({
5
    super.key,
6
    required this.settings,
7
    required this.category,
8
  });
9

10
  final String category;
11
  final List<ListTile> settings;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Padding(
16
      padding: const EdgeInsets.only(top: 20.0),
17
      child: Column(
18
        crossAxisAlignment: CrossAxisAlignment.start,
19
        children: [
20
          Text(
21
            category,
22
            style: TextStyle(fontSize: 14, color: Colors.blue),
23
          ),
24
          SizedBox(height: 10),
25
          ListView(
26
            physics: NeverScrollableScrollPhysics(),
27
            shrinkWrap: true,
28
            children: settings,
29
          ),
30
        ],
31
      ),
32
    );
33
  }
34
}

解析
一樣為避免 ListView 能夠捲動，故一樣將 physics 設定為 NeverScrollableScrollPhysics()。

TransferItem#

用於顯示傳輸列表中的檔案

1
import 'package:flutter/material.dart';
2

3
import '../Types/TransferStatus.dart';
4

5
class TransferItem extends StatelessWidget {
6
  const TransferItem({
7
    super.key,
8
    required this.name,
9
    required this.size,
10
    required this.status,
11
    required this.code,
12
    required this.device,
13
    required this.progress,
14
  });
15

16
  final String name;
17
  final String size;
18
  final String code;
19
  final String device;
20
  final TransferStatus status;
21
  final int progress;
22

23
  @override
24
  Widget build(BuildContext context) {
25
    return Card.filled(
26
      color: Colors.white,
27
      shape: RoundedRectangleBorder(
28
        borderRadius: BorderRadius.circular(20),
29
        side: BorderSide(color: Colors.grey.shade300),
30
      ),
31
      child: ListTile(
32
        leading: Container(
33
          width: 50,
34
          height: 50,
35
          decoration: BoxDecoration(
36
            borderRadius: BorderRadius.circular(15),
37
            color: (status == TransferStatus.InProgress
38
                    ? Colors.blueAccent
39
                    : (status == TransferStatus.Done
40
                        ? Colors.greenAccent
41
                        : (status == TransferStatus.Failed
42
                            ? Colors.redAccent
43
                            : Colors.orangeAccent)))
44
                .shade100
45
                .withAlpha(50),
46
          ),
47
          child: Icon(
48
            Icons.description_outlined,
49
            color:
50
                status == TransferStatus.InProgress
51
                    ? Colors.blue
52
                    : (status == TransferStatus.Done
53
                        ? Colors.green
54
                        : (status == TransferStatus.Failed
55
                            ? Colors.red
56
                            : Colors.orange)),
57
            size: 30,
58
          ),
59
        ),
60
        title: Text(
61
          name,
62
          style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
63
        ),
64
        subtitle: Padding(
65
          padding: EdgeInsets.only(top: 2),
66
          child: Column(
67
            crossAxisAlignment: CrossAxisAlignment.start,
68
            children: [
69
              Text(
70
                "$size・Code: $code",
71
                style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
72
              ),
73
              Text(
74
                device,
75
                style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
76
              ),
77
            ],
78
          ),
79
        ),
80
        trailing: Row(
81
          mainAxisSize: MainAxisSize.min,
82
          children: [
83
            (status == TransferStatus.InProgress
84
                ? CircularProgressIndicator(
85
                  constraints: BoxConstraints(
86
                    minWidth: 15,
87
                    minHeight: 15,
88
                  ),
89
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
90
                  backgroundColor: Colors.grey.shade300,
91
                  value: progress / 100,
92
                )
93
                : Icon(
94
                  status == TransferStatus.Done
95
                      ? Icons.check_circle
96
                      : (status == TransferStatus.Failed
97
                          ? Icons.cancel
98
                          : Icons.schedule_outlined),
99
                  color:
100
                      status == TransferStatus.Done
101
                          ? Colors.green
102
                          : (status == TransferStatus.Failed
103
                              ? Colors.red
104
                              : Colors.orange),
105
                )),
106
            SizedBox(width: 10),
107
            Text(
108
              status == TransferStatus.InProgress
109
                  ? "$progress%"
110
                  : (status == TransferStatus.Done
111
                      ? "Done"
112
                      : (status == TransferStatus.Failed
113
                          ? "Failed"
114
                          : "Pending")),
115
              style: TextStyle(
116
                fontSize: 12,
117
                color:
118
                    status == TransferStatus.InProgress
119
                        ? Colors.blue
120
                        : (status == TransferStatus.Done
121
                            ? Colors.green
122
                            : (status == TransferStatus.Failed
123
                                ? Colors.red
124
                                : Colors.orange)),
125
              ),
126
            ),
127
          ],
128
        ),
129
      ),
130
    );
131
  }
132
}

解析
TransferStatus 為 custom enumeration，稍後會展示，用於表示檔案傳輸的狀態。
利用連續三元運算子，以 status 值決定相關屬性
因為 status 為 TransferStatus.InProgress 時要顯示不同的 widget，故第一個三元運算子在最外層。而 CircularProgressIndicator 則用於顯示檔案傳輸的進度，顯示的進度由 progress 值決定。

Types#

檔案全部位於 Types 資料夾中，全部皆為自訂資料型別。

Language#

1
enum Language {
2
  Auto,
3
  English,
4
  TraditionalChinese,
5
  SimplifiedChinese,
6
}

ThemeMode#

1
enum ThemeMode{
2
  System,
3
  Light,
4
  Dark
5
}

TransferStatus#

1
enum TransferStatus {
2
  InProgress,
3
  Done,
4
  Failed,
5
  Pending
6
}

App Exhibition#

關於 MenuAnchor 沒有動畫的部分請參考此 issue：

Add open and close animations for MenuAnchor · Issue #135025 · flutter/flutter

Is there an existing issue for this? I have searched the existing issues I have read the guide to filing a bug Use case So I noticed this after replacing PopupMenuButtons and DropdownButtons in our...

github.com

Is there an existing issue for this? I have searched the existing issues I have read the guide to filing a bug Use case So I noticed this after replacing PopupMenuButtons and DropdownButtons in our...

Wrapping Up#

這次 App 老實說做起來真的有點累，為了要用到全部的 widget，需要一次刻到三個 page，早知道做 about page 就好了。但是其實換個角度想，如果沒有寫出這次的東西，我現在知道的可能會比寫 about page 還要少，所以感覺寫出了這次的作業還是很值得的。裡面雖然有非常多我沒用過的東西，但是其實沒關係，邊用邊學，其實用著用著就知道怎麼用了。