flutter系列6-flutter项目介绍

flutter项目目录简介

Android： Android平台相关的代码
ios： ios平台相关代码
lib： flutter相关代码，我们主要编写的代码就在这个文件夹
test： 用于存放测试代码
pubspec.yaml: 配置文件，一般存放一些第三方库的依赖

Flutter入口文件，入口方法

lib目录下的main.dart就是flutter的入口文件

入口方法在main.dart中的：

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

使用箭头函数简写为：

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

我们把项目创建的自带的main.dart代码全部删除，添加下面代码：

import 'package:flutter/material.dart';

void main() => runApp(new Center(
  child: new Text(
    "hello flutter",
    textDirection: TextDirection.ltr,
  ),
));

运行，效果如下：

自定义组件

import 'package:flutter/material.dart';

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

//自定义组件
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        "hello flutter 自定义组件",
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

MyApp是定义的组件，继承StatelessWidget，StatelessWidget无状态的组件

修改home属性，添加appbar

上面些的hello flutter 背景是黑的，我们应该如何添加标题栏呢，直接上代码：

import 'package:flutter/material.dart';

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

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        "hello flutter 自定义组件",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 30,
          color: Color(0xffffff00),
        ),
      ),
    );
  }

}

看运行效果：

配置主题，首先需要引入MaterialApp和Scaffold，这是编写flutter框架的基本结构，在flutter中所有的东西都是组件。