学习flutter已经有一段时间了，现在已经开始到了具体项目中。想着刚开始学习的时候，好多文档资料说的都不一样，就准备把新项目的过程记录下来。可能有不对的地方，欢迎大家指出。废话不多说，开整～

flutter 官方推荐的开发工具是Android studio、visual studio 、intellij IDEA，由于习惯了android 开发，所以这里选择的还是Android studio。没有开发环境的需要看下前一篇搭建开发环境。

一、安装插件

flutter 提供了android的插件我们需要安装一下。打开studio的设置-->plugins-->Marketplace

搜索 dart 和 flutter 安装，安装完毕之后会进行重启。下面是安装完成后的样子。

注意：这个地方有个坑，可能你的插件Marketplace根本搜索不出来任何插件。解决办法是，打开 studio system settings --> Updates --> 去掉 use secure connection的勾选。如图：

二、新建工程

安装完插件之后，我们就可以创建flutter 工程了。

选择开始一个flutter project

这里有4种类型，我们先选择第一种 Flutter Application 其他的类型，后面的工程里会使用到，到时候我们在讲。

这个地方值得注意，因为之前提前下载了 flutter sdk 所以这个地方配置以下就可以了，如果没有下载，在这个地方点击install，并且指定好目录同样会进行下载。一路next之后，新创建的工程就准备好了。这里值得多说一下，我第一次开发的时候，在这个页面卡了好久好久，后来找到原因是gradle下载的问题，解决了之后，再也没有遇到过。

由于我之前使用了 i18n的国际化资源插件，所以在创建好工程后会多出两个文件夹，这篇文章不涉及资源文件，大家可以忽略。

打开main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这个地方是设置主题颜色
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      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: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

后面我会继续更新具体的业务需求，这里就不对控件做具体描述。

三、运行

然后我们打开模拟器，运行一下程序。我这里选择的是iOS模拟器，如果有android真机或者模拟器也可以同样运行。

flutter的一个特点就是fast development，官方传说热启动可以达到亚秒级别。我们现在来修改一下屏幕中间的文字。

You have pushed the button this many times:--->改成 哈哈哈逗比123～～～～～～ 

emmmmm 有点偏离主题，还是改成hellow world吧！然后保存在来看模拟器，也跟着几乎同步变化了。这样的加载机制会大大提高我们的开发效率，不过这套机制也有不足，我现在在开发项目的时候，就经常遇到热加载不能把最新的代码载入的情况，如果出现这样的事情，大家可以执行一下 flutter clean 将之前的缓存清理掉，然后在重新开始编译运行。

hello world 完美运行！请期待下篇

Flutter第3期 hello world

一、安装插件

二、新建工程

三、运行

猜你喜欢