学习原文: https://flutterchina.club/
1. 安装:
配置环境变量:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
下载sdk解压到目录并把目录添加到path中:
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
export PATH=`pwd`/flutter/bin:$PATH
用flutter doctor检查环境及具体环境设置
https://flutterchina.club/setup-macos/
编辑器使用Android Studio(IntelliJ IDEA Ultimate)或者Visual Studio Code
2. 开发步骤
第一个MaterialApp(material.dart代码文件)
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
使用外部包,在pubspec.yaml文件中加入需要导入的包如下,然后用命令flutter pub get更新依赖包
english_words: ^3.1.5
在material.dart代码文件头中加入
import 'package:english_words/english_words.dart';
3 widgets
Basic widgets:Text,
Row
, Column,Stack,
Container
Material Components:MaterialApp,
Navigator
, AppBar,
Scaffold,
leading
, actions
, title
https://flutter.dev/docs/development/ui/widgets/material
熟悉StatelessWidget和StatefulWidget控件,区别在于状态的改变:
StatelessWidget面向那些始终不变的UI控件,比如标题栏中的标题;
而StatefulWidget则是面向可能会改变UI状态的控件,比如有点击反馈的按钮。
StatefulWidget的创建需要指定一个State,在需要更新UI的时候调用setState(VoidCallback fn),并在VoidCallback中改变一些变量数值等,组件会重新build以达到刷新状态也就是刷新UI的效果。
Handling gestures:https://flutter.dev/docs/development/ui/advanced/gestures
使用 GestureDetector
widget 包含 Container
, GestureDetector
里面有 onTap()
回掉, 其它的 taps, drags, and scales都有回掉.
IconButton
, ElevatedButton
, FloatingActionButton
有 onPressed()
手势回掉.