flutter初体验

（一）简单体验flutter

import 'package:flutter/material.dart';

void main() {
  runApp(new Center(
      child: new Text(
    '你好Flutter,至尊小涛',
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr,
  )));
}

需要注意的是，一定药导入dart包，同时通过 void main（）执行runApp才能进行下一步的操作。runApp里面可以传入组件（万物皆组件）

效果图：

我们说到flutter万物皆组件，因此我们就可以吧runApp里面的内容抽离成组件

方法：定义一个类，继承StatelessWidget，并重写其bulid方法，最后return 一个组件出来即可。写完我们自定义的组件之后，不要忘记 runApp(MyApp());

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Text(
      '你好Flutter,至尊小涛',
      textAlign: TextAlign.center,
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40,
        color: Colors.blue
      ),
    ));
  }
}

很显然，我们的手机应用不可能就这么简单，我们的手机应用一般都有顶部导航，同时还有背景。那么下面我们来看看如何实现吧。

（二）带有顶部导航的fluterr应用

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter 界面"),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: Text(
      '你好Flutter 111',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
        // color: Color.fromRGBO(244, 233, 121, 0.5),
      ),
    ));
  }
}

效果：

分析
（1）我们还是采取组件化思想，自定义一个组件继承StatelessWidget，并重写其bulid方法，我们返回一个MaterialApp对象，里面还有主要的三个参数
一个是home，这里我们给他复制AppBar并为其设置title，也就是顶部导航文字。然后一个body参数，我们为其设置我们自定义的组件（见下面），
我们可以为MaterialApp指定一个theme，其中的值为ThemeData(primarySwatch: Colors.yellow)，设置顶部导航栏的颜色为黄色。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter 界面"),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

（2）HomeContent组件的编写

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: Text(
      '你好Flutter 111',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
        // color: Color.fromRGBO(244, 233, 121, 0.5),
      ),
    ));
  }
}

该组件内涵文本框，并为其设置了字体大小以及颜色。

结束

好了，掌握了上面的两个案例，就掌握了flutter的基本编写流程，主要就是运用到了组件化编程思维，如果你还没有组件化编程思维的概念，就去了解一下吧。