安裝Flutter1.17版本

查看頁面https://flutter.cn/docs/get-started/install 里面描述超級詳細(xì)

下載地址

下載：git clone?https://github.com/flutter/flutter.git?

配置環(huán)境

環(huán)境配置有設(shè)置path和設(shè)置到flutter.cn地址，關(guān)鍵path需要設(shè)置。

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

安裝dart

下載dart文件：

git地址下載：https://dart.dev/get-dart ,下面的安裝比較詳細(xì)。

配置環(huán)境（mac）

export DART_HOME=/Users/keny/tools/dart-sdk/bin

export PATH="${DART_HOME}:${PATH}"

檢測環(huán)境

dart --version

Dart VM version: 2.7.1 (Thu Jan 23 13:02:26 2020 +0100) on "macos_x64"

flutter --version

Flutter 1.17.0 ? channel stable ? https://github.com/flutter/flutter.git

Framework ? revision e6b34c2b5c (3 weeks ago) ? 2020-05-02 11:39:18 -0700

Engine ? revision 540786dd51

Tools ? Dart 2.8.1

快速建立as的 flutter_app

下一步，修改項(xiàng)目名稱，選擇dart sdk環(huán)境。next 完成

用as建立一個(gè)flutter的最簡單的flutter_app的代碼，用例檢測環(huán)境配置運(yùn)行成功后可以。

lib/main.dart的文件

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: '智慧rdda大成',
? ? ?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),
? ? ?), // This trailing comma makes auto-formatting nicer for build methods.
? ?);
?}
}

dart代碼運(yùn)行，as的運(yùn)行

運(yùn)行代碼

flutter pub get

Running "flutter pub get" in flutter_app...? ? ? ? ? ? ? ? ? ? ? ? ?0.5s

flutter run

Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with

"--enable-software-rendering".

Launching lib/main.dart on Android SDK built for x86 in debug mode...

跑通例子說明您的環(huán)境可以可以下一步跑3d，讓我們開始吧。

下載git代碼 for 3D代碼

git地址：

git clone https://github.com/RichardCubed/flutter_demo_3d

代碼結(jié)構(gòu)

修改配置build.pradle

? ?repositories {
? ? ? ? maven { url 'https://maven.aliyun.com/repository/jcenter' }
? ? ? ? maven { url 'https://maven.aliyun.com/repository/google' }
? ? ? ? maven { url 'https://maven.aliyun.com/repository/central' }
? ? ? ? maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
? ? ? // ?google()
? ? ? ?//?jcenter()
? ?}

運(yùn)行效果截圖

我的bilibili的動(dòng)畫錄制，效果比較好

喜歡我的文章，請關(guān)注"嗨大成",謝謝！