flutter入门配置及对比学习flutter

flutter配置环境篇

前言

使用flutter有段时间了，总有感觉flutter与ReactNative很相似，不过flutter是goodle的亲儿子，所以拿着了解用用还是不错，既然是环境配置篇，当然是初级入门了，不过笔者是mac系统，就用mac系统来说了…

安装

flutter的官网环境是真友好，什么语言什么开发环境都是完备的文档，大公司果然把逼格装在前面

连接地址：https://flutterchina.club/get-started/install/

上面是官网的安装指示，下面开始我们自己的安装

啥安装也不开这两步，sdk和环境配置，主要分为3个步骤：

1 Flutter SDK下载

• sdk下载，本人是从github中clone来的，愉快的留个"同性友好交友网站“地址：https://github.com/flutter/flutter

  ​ 这亲切的ui设计风格，是不是友好的一批

  • clone地址：[https://github.com/flutter/flutter.git]

• clone一份，建议clone哈，你直接下载下来，后面总提示[not a git repository 这种错

2 Flutter 环境变量配置

• 这个相信配置过sdk的朋友都不陌生，不过感谢党和政府为避免我们受到伤害，让我们时时刻刻生活在天网之下，我们访问Flutter有时候会受到限制，Flutter大大给我们搭建了临时镜像

  • 打开命令行： 打开 ~/.bash_profile文件 添加如下内容

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

  • 添加刚才clone的flutter的工具bin地址进环境变量中

    export PATH=/Users/lichenxing/Documents/work/flutter/bin:$PATH
    

  • 最后一步：Esc -> :wq! 保存，然后 source ~/.bash_profile使其生效

• 终于到了见证奇迹的时刻

  • 运行 flutter doctor，出现如下图案即是成功

  • 再往下翻会看到如下图，这里是检测你电脑上开发工具中缺少插件，可以看到笔者的AndroidStudio/XCode/VSCode…等等这些都缺少一些东西，不过我的Intellij IDEA是好使的，因为我目标就是在IDEA上开发，而不是刚才的那些工具，所以不必害怕出错

注意这里flutter doctor是安装所有环境所以会检测XCode，如果只想安装Android或IOS只需要在后面添加自己想安装的环境即可

egs：flutter doctor –android-licenses 即可

至此flutter的环境安装就结束了，接下来我们从一个flutter的demo项目来初步了解下

Flutter尝鲜

• 打开工具，笔者这里是使用IDEA使用，创建一个flutter项目
  

  这里就是我们flutter的sdk位置，接着下一步会有很多选项供我们选择：
  

  我们可以选择java->OC/也可以kotlin->swift就说跨平台确实比ReactNative人性化一些，😂😂😂
  finish后，就完成了flutter项目的创建，我们先看下它的目录结构：
  
  我们可以看到在工程目录里不仅有android也有ios，还有一个lib文件，我们在开发工具中打开看看：
  
  这里lib下的main.dart就是我们入口文件，与RN的入口很相似，其的主函数main() 就是我们的项目入口，我们运行起来我们的第一个flutter项目完美运行

第一个Dart文件分析

入口

void main() => runApp(MyApp());
这里就是我们dart文件的入口函数，也是工程的入口
Android可以理解为：
<intent-filter>
   <action android:name="android.intent.action.MAIN" />
		<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
java可以理解为：
springApplication.run()

主体

上面的runApp内有一个实体myApp()这个部分，其实这就是我们页面的主体

咱们先把主体代码贴出来：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //app名称
      title: 'Flutter Demo',
      //app的主体
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //填充页面的主体
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

请留意这里的MyApp在我们的main()方法处罚调用，这里的widget就帮我们声明了一个MaterialApp，这里就直接展示了我们app的名字，以及主题，还有就是我们主体页面的部分MyHomePage

• 真实页面主体MyHomePage

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    _MyHomePageState createState() => _MyHomePageState();
  }
  

  这个homepage相对简单，但是借助了StatefulWidget实现了控件的状态保存，怎么理解呢？，我这里借用vue的Vuex来理解这个StatefulWidget，就是处理一些业务的状态的处理

最后的大招 _MyHomePageState

既然是大招，就好好来领略领略，其代码如下,由于是大招，我分成两部分介绍，一部分是刚才我们说的状态管理实现，另一部分是页面的实现

• 状态管理

  class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;
  
    void _incrementCounter() {
      setState(() {
        _counter++;
      });
    }
  }
  
  这里存放了状态counter，用于记录当前页面增加的数字状态管理
  

• 页面实现

  接下来就要隆重的分析这个build(BuildContext context)这个函数的作用，它就决定了我们页面的长相，其实就相当于Android的layout文件

  @override
   Widget build(BuildContext context) {
      return Scaffold(
        //首先放了一个Appbar，就是页面的titleBar上展示
        appBar: AppBar(
          title: Text(widget.title),
        ),
        //这一部分就是主体页面实现，Center包含就是下面这些控件皆居中显示，内部有两个子控件Text，第一个text文本信息是'You have pushed the button this many times‘，第二个text文本信息是呈现状态记录属性的值也就是上面counter的值
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
        //接着摆放一个floatingActionButton，点击时操作状态管理，子控件的图标放了一个add的图标
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      );
    }
  

到这里，一个页面的构建也就结束了，flutter就长这样，感觉也就这样吧😂😂😂