# start_to_flutter

**Repository Path**: pseason/start_to_flutter

## Basic Information

- **Project Name**: start_to_flutter
- **Description**: start_to_flutter
- **Primary Language**: Dart
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter

#### 介绍
flutter study

#### 环境搭建
- 语言环境 dart、flutter
```log
///win直接配置到环境编辑即可，mac配置到bash_profile或者zsh
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
```
- 工具 VSCode(开发)、Android Studio(模拟安卓)

#### 基本组件
- Widget 分为 有状态 和 无状态 两种，在 Flutter 中每个页面都是一帧，无状态就是保持在那一帧，而有状态的 Widget 当数据更新时，其实是创建了新的 Widget，只是 State 实现了跨帧的数据同步保存。
- StatelessWidget 无状态Widget
- StatefulWidget 有状态Widget

#### flutter 布局
Flutter中拥有需要将近30种内置的布局Widget，其中常用有Container、Padding、Center、Flex、Stack、Row、Column、ListView等

|	类型		|	作用特点	|
|	----	|	----	|
|Container|只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。|
|Padding|只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。|
|Center|只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。|
|Stack|可以有多个子 Widget。 子Widget堆叠在一起。|
|Column|可以有多个子 Widget。垂直布局。|
|Row|可以有多个子 Widget。水平布局。|
|Expanded|只有一个子 Widget。在 Column 和 Row 中充满。|
|ListView|可以有多个子 Widget。列表模式。|

[布局参考](https://flutterchina.club/widgets/layout/)

#### flutter 页面
Flutter 中除了布局的Widget，还有交互显示的Widget和完整页面呈现的Widget，
其中常见的有MaterialApp、Scaffold、Appbar、Text、Image、FlatButton等

|	类型		|	作用特点	|
|	----	|	----	|
|MaterialApp|一般作为APP顶层的主页入口，可配置主题，多语言，路由等|
|Scaffold|一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。|
|Appbar|一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它 。|
|Text|显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。|
|RichText|富文本，通过设置TextSpan，可以拼接出富文本场景。|
|TextField|文本输入框 ：new TextField(controller: //文本控制器, obscureText: "hint文本");|
|Image|图片加载: new FadeInImage.assetNetwork( placeholder: "预览图", fit: BoxFit.fitWidth, image: "url");|
|FlatButton|按键点击: new FlatButton(onPressed: () {},child: new Container());|


#### 参考地址
[掘金用户-flutter专栏](https://juejin.im/collection/5db25bcff265da06a19a304e)