iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Mobile Development

Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰系列 第 2

Dart & Flutter 開發環境安裝 | Windows

開發環境安裝 (setting up the development environment)

1. Flutter 開發環境的搭建 -1

  1. 系統基本要求
  • OS: win7, 64bits
  • Disk: 3G-5G
  1. JAVA 環境安裝
  1. Flutter SDK 的安裝

--

2. Flutter開發環境的安裝 -2

Flutter 開發環境的搭建

  1. Android Studio 的介紹和安裝
  1. Dart 和 Flutter 開發外掛程式的安裝
  • 打開 Android Studio
  • 出現 Search in repositories 時點擊進入
  • 安裝 Flutter 會自動安裝 Dart 外掛程式
    • Flutter
    • Dart
  1. Android 證書的安裝
  • win + R
  • enter --android-licenses
androidSetUp-1
androidSetUp-1
androidSetUp-2
androidSetUp-2
androidSetUp-3
androidSetUp-3
androidSetUp-4
androidSetUp-4

--

3. AVD 虛擬機的建立

  1. 新建一個Flutter 項目
  • 打開 Android Studio, 選擇 Start a new Flutter project
  • 再次選擇 Flutter Application, 需要等待一會
  1. AVD 虛擬機器的安裝
  • 打開 tool菜單, 執行 AVD Manager 選項

--

4. VSCode 中搭建 Flutter 開發環境

VSCode 中搭建開發環境

  1. 在 VSCode 中安裝 Flutter 和 Dart 外掛程式
  2. VSCode 中如何安裝和啟動虛擬機
  3. VSCode 中新建 Flutter 項目並運行
  • Terminal:
    • flutter create projectName
    • cd projectName
    • flutter run
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

--

5.手把手教你寫一個 HelloWorld 程式

Code: helloProject

寫一個 HelloWorld 程式

  1. 手把手帶大家寫一個 HelloWorld 程式
    import 'package:flutter/material.dart';
    // 引入樣式包,基礎樣式。 material.dart
    
    void main() => runApp(MyApp());
    // runAPP() 執行App
    
    //繼承靜態組件
    class MyApp extends StatelessWidget {
      // 重寫
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Welcome to Flutter',
            home: Scaffold(
                // 上面的藍條
                appBar: AppBar(
                  title: Text('Hello World'),
                ),
                body: Center(
                  child: Text('Hello World!'),
                )));
      }
    }
    
hello
Hello World
  1. StatefulWidget (靜態) 和 StatelessWidget (動態) 區別
  2. VSCode 中常用快捷鍵和熱加載
快捷鍵 功能
R 鍵 點擊後熱加載, 直接查看預覽效果.
P 鍵 在虛擬機中顯示網格, 工作中經常使用.
O 鍵 切換 Android 和 iOS 的預覽模式
Q 鍵 退出調試預覽模式

升級 Flutter SDK

  1. Terminal: flutter upgrade
  2. 刪除 SDK 包重新下載

上一篇
Dart & Flutter 簡介 | 菜鳥入門
下一篇
Dart & Flutter 開發環境安裝 | macOS
系列文
Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言