关于Flutter

mac下添加环境变量

1.输入vim ./.bash_profile 确定enter，然后就打开了bash_profile文件
2.点击i建进入编 辑状态
3.使用镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4.Esc 退出编辑模式
5.输入:wq 保存后退出vi
6.open ~/.bash_profile
7.bash_profile文件中添加
export PATH=/Users/用户名/flutter/bin:$PATH
8.配置文件完成后，使用 source 命令重新加载一下
source ~/.bash_profile
9.检查开发环境
flutter doctor

创建flutter并运行

1.调用 View>Command Palette…
输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
2.打开模拟器
open -a Simulator
3.运行
flutter run

flutter pub get //安装依赖 同npm i

无状态:StatelessWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "test",
      home: Scaffold(
        appBar: AppBar(
          title: Text("欢迎来到")
        ),
        body: Center(
          child: Column(
            children:<Widget>[
              //文字
              Text(
                "Hello Flutter,Hello FlutterHello FlutterHello FlutterHello FlutterHello FlutterHello FlutterHello FlutterHello FlutterHello FlutterHello Flutter",
                textAlign: TextAlign.left,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontSize: 28
                ),), 
                //小图标
                Icon(
                  Icons.people, 
                  size: 50,
                  color: Colors.blue,
                ),
                //关闭按钮
                CloseButton(),
                 //回退按钮
                BackButton(),
                
                Chip(
                  //材料料设计中⼀一个⾮非常有趣的⼩小部件，什什么是 Chip@https://material.io/design/components/chips.html
                  avatar: Icon(Icons.people),
                  label: Text('StatelessWidget与基组件'), 
                ),
                //分割线
                Divider(
                  height: 10, //容器器⾼高度，不不是线的⾼高度
                  indent: 10, //左侧间距
                  color: Colors.orange,
                ),
                Card(
                  //带有圆⻆角，阴影，边框等效果的卡⽚片 color: Colors.blue, elevation: 5,
                  margin: EdgeInsets.all(10), 
                  child: Container(
                  padding: EdgeInsets.all(10), 
                  child: Text(
                    'I am Card',
                  ), ),
                ),
                //弹出框
                AlertDialog(
                  title: Text('标题'),
                  content: Text("Flutter"),
                )
            ]
          ) 
            ),

      ),
    );
  }
}

路由跳转 MaterialPageRoute

//MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是Material组件库提供的组件
 Navigator.push( context,
           MaterialPageRoute(builder: (context) {
              return NewRoute();
           }));