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

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

1. 系統基本要求

• OS: win7, 64bits
• Disk: 3G-5G

2. JAVA 環境安裝

• Download: Java SE Development Kit 8 Downloads
• Setup to C disk
• win + R
• enter java

3. Flutter SDK 的安裝

• Download: Flutter SDK releases

• 配置環境變量 /flutter/bin

• win + R

• enter flutter doctor

• iOS 工程師的 Flutter 踩坑筆記 — 開發環境建置_medium_潔客幫Jackercleaning_2019

--

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

Flutter 開發環境的搭建

1. Android Studio 的介紹和安裝

• Download: Android Studio

2. Dart 和 Flutter 開發外掛程式的安裝

• 打開 Android Studio
• 出現 Search in repositories 時點擊進入
• 安裝 Flutter 會自動安裝 Dart 外掛程式
  • Flutter
  • Dart

3. Android 證書的安裝

• win + R
• enter --android-licenses

androidSetUp-1
androidSetUp-2
androidSetUp-3
androidSetUp-4

--

3. AVD 虛擬機的建立

1. 新建一個Flutter 項目

• 打開 Android Studio, 選擇 Start a new Flutter project
• 再次選擇 Flutter Application, 需要等待一會

2. 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 World

2. StatefulWidget (靜態) 和　StatelessWidget (動態) 區別
3. VSCode 中常用快捷鍵和熱加載

升級 Flutter SDK

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