# Flutter_Learning

**Repository Path**: simonck666/flutter-learning

## Basic Information

- **Project Name**: Flutter_Learning
- **Description**: Learning Dart and Flutter
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-23
- **Last Updated**: 2022-01-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: your name
 * @Date: 2021-12-30 20:06:04
 * @LastEditTime: 2022-01-01 10:16:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \flutter-learning\README.md
-->

# Flutter Learning

## Dart

详情见 Dart_Basic_Grammer/

## Flutter Learning

### 1. 创建一个 Flutter 应用

- 启动 vscode，打开 `Command Pallete`
- 选择 `Flutter: New Project` 来创建一个 Flutter 项目 helloworld
- 也可以使用命令 `flutter create helloworld` 来创建
- 更改 `lib/main.dart` 文件，显示 Hello World
- 选择菜单 `Device > Start Debugging` (or F5) 运行和调试应用

### 2. Flutter 布局机制

- Flutter 布局机制的核心是组件 Widget
- Flutter 里边几乎一切都是组件，除了可见的图片、图标和文字等内容，还有用来排列、限制、对齐这些可见组建的行、列、网络等
- 通过组合简单组件来构建复杂组件

![wedget1](pic/Widget1.png)

### 3. Flutter 布局步骤

- 选择用来容纳组件的布局组件，如：Center, Container, Row, Column

- 创建用来容纳可见内容的组件，如：Text, Image, Icon

- 将可见组件添加到布局组件中，通过传递给其属性 child or children

- 将布局组件添加到页面组件中，一般在其 build 方法里完成

### 4. 水平和垂直布局

- 水平和垂直布局是最常见的布局，可分别使用 Row 和 Column 来完成，他们可以互相嵌套

![column](pic/Column.png)

![Row](pic/Row.png)

![RC](pic/RC.png)