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

Flutter開發環境的安裝 -1

Flutter 開發環境的搭建

1. 系統基本要求

• OS: macOS (64-bit)
• Disk: 2.8 GB

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

• iOS-cmd:

  • chsh -s /bin/zsh
  • cd /Library/flutter
  • export PATH=$PATH:/Library/flutter/bin
    // install
  • sudo xcodebuild -license
  • sudo xcodebuild -runFirstLaunch
  • sudo gem install cocoapods

• win + R

• enter flutter doctor

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

--

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

--

AVD 虛擬機器的建立

1. 新建一個Flutter 項目

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

2. AVD 虛擬機器的安裝

• 打開 tool菜單, 執行 AVD Manager 選項

--

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),
      ),
    );
  }
}

--

升級 Flutter SDK

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