0%

初搭建flutter遇到的问题整理

获取Flutter SDK

  • 配置环境变量(.bash_profile)
1
2
3
4
5
6
7
8
9
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/yilongwu/long/flutter/flutter/bin:$PATH

// /Users/yilongwu/long/flutter/flutter 是Git clone的地址
source ~/.bash_profile

// 该命令检查您的环境并在终端窗口中显示报告
在命令行:flutter doctor

flutter doctor 命令后出现的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.12.5-pre.18, on Mac OS X 10.14.2 18C54, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
You may also want to add it to your PATH environment variable.

[✗] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[!] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.40.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available

! Doctor found issues in 6 categories.
  • 解决问题方法:1,安装android studio ,下载对应的插件

下载dart的sdk出现的问题

1
2
3
4
5
6
7
8
9
10
11
12
brew tap dart-lang/dart
问题:
touch: /usr/local/Homebrew/.git/FETCH_HEAD: Permission denied
touch: /usr/local/Homebrew/Library/Taps/caskroom/homebrew-cask/.git/FETCH_HEAD: Permission denied
touch: /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask/.git/FETCH_HEAD: Permission denied
touch: /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/FETCH_HEAD: Permission denied
fatal: Unable to create '/usr/local/Homebrew/.git/index.lock': Permission denied
fatal: Unable to create '/usr/local/Homebrew/.git/index.lock': Permission denied
error: could not lock config file .git/config: Permission denied
==> Tapping dart-lang/dart
fatal: could not create leading directories of '/usr/local/Homebrew/Library/Taps/dart-lang/homebrew-dart': Permission denied
Error: Failure while executing; `git clone https://github.com/dart-lang/homebrew-dart /usr/local/Homebrew/Library/Taps/dart-lang/homebrew-dart --depth=1` exited with 128.
  • 如何解决:
1
2
3
4
// 赋予权限
// sudo chgrp -R admin /usr/local
sudo chmod -R g+w /usr/local //改变文件夹得权限组
sudo chown -R 777 wuyilong /usr/local // 为文件赋予 读写运行的权限

flutter官网的demo

main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:flutter/material.dart';
import 'utils/RandomWords.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// final wordPair = new WordPair.random();
return new MaterialApp(
theme: new ThemeData(
primaryColor: Colors.red
),
home: new RandomWords()
);
}
}

RandomWords.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

// State类。 StatefulWidget类本身是不变的,但是 State类在widget生命周期中始终存在.
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
// 以下划线开头的变量,在dart语言中会强制性变成私有的
final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);
final _saved = new Set<WordPair>();

void _pushSaved() {
Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
final tiles = _saved.map((pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
});

final divided =
ListTile.divideTiles(context: context, tiles: tiles).toList();

return new Scaffold(
appBar: new AppBar(title: new Text("收藏的单词")),
body: ListView(children: divided)
);
}));
}

// 列表widget
Widget _buildSuggestions() {
return new ListView.builder(itemBuilder: (context, i) {
// 在每一列之前,添加一个1像素高的分隔线widget
if (i.isOdd) {
return new Divider();
}

// 表示i除以2,向下取整
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}

// 行widget
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);

return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}

@override
Widget build(BuildContext context) {
// final wordPair = new WordPair.random();
// return new Text(wordPair.asPascalCase);
return new Scaffold(
appBar: new AppBar(
title: new Text("列表"),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)
],
),
body: _buildSuggestions(),
);
}
}

pubspec.yaml

1
2
3
4
5
6
7
8
9

dependencies:
flutter:
sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
english_words: ^3.1.0
  • 从头开始创建一个Flutter应用程序.
  • 编写 Dart 代码.
  • 利用外部的第三方库.
  • 使用热重载加快开发周期.
  • 实现一个有状态的widget,为你的应用增加交互.
  • 用ListView和ListTiles创建一个延迟加载的无限滚动列表.
  • 创建了一个路由并添加了在主路由和新路由之间跳转逻辑
  • 了解如何使用主题更改应用UI的外观.

-------------本文结束感谢你的阅读---------