iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Mobile Development

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

Dart & Flutter 開發環境安裝 | macOS

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

Flutter開發環境的安裝 -1

Flutter 開發環境的搭建

  1. 系統基本要求
  • OS: macOS (64-bit)
  • Disk: 2.8 GB
  1. JAVA 環境安裝
  1. Flutter SDK 的安裝

--

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

--

AVD 虛擬機器的建立

  1. 新建一個Flutter 項目
  • 打開 Android Studio, 選擇 Start a new Flutter project
  • 再次選擇 Flutter Application, 需要等待一會
  1. 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 包重新下載

上一篇
Dart & Flutter 開發環境安裝 | Windows
下一篇
Flutter 常用組件講解 | TextWidget
系列文
Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰12

尚未有邦友留言

立即登入留言