02-Flutter移动电商实战-创建项目和编写入口文件

环境搭建请参考以前写的一篇文章：Flutter_初体验_建立第一个应用

一、建立项目

采用AndroidStudio构建本项目，FIle>New>New Flutter Project…

建立后的项目以下图所示：

咱们着重须要注意一下几个文件夹,其余的暂时不用理会

文件夹	做用
android	android平台相关代码
ios	ios平台相关代码
lib	flutter相关代码，咱们主要编写的代码就在这个文件夹
pubspec.yaml	配置文件，通常存放一些第三方的依赖。

二、编写入口文件

flutter 中的入口文件为 main.dart，该文件位于 lib 文件夹中。

默认建立的项目已经给我带了一些测试代码，运行起来看一下：

接下来要开始咱们本身的项目书写了。

2.1 创建主页文件和目录结构

咱们在 lib 目录下创建一个 pages 目录，这个目录主要放置项目所用的全部 UI 界面的文件，在 page 目录下，创建 index_page.dart 文件。

有了这个文件，咱们先创建一个静态 Widget，主要是检验咱们的入口文件是否可用。

index_page.dart 代码：

import 'package:flutter/material.dart';

class IndexPage  extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本内容"),
      ),
    );
  }
}

代码写完后，须要在 main.dart(入口文件)，用 impoart 引入 index_page.dart 文件。

import './pages/index_page.dart';

main.dart 所有代码：

import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/index_page.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Container(
        child:
            MaterialApp(
              title: 'Flutter Demo',
              theme: ThemeData(
                primarySwatch: Colors.blue,
              ),
              home: new IndexPage(),
            )
    );
  }
}

咱们再次运行起来看一下：

三、最后补充

跟着学习，以及在整理这个系列笔记中，关于文中一些基础部分再也不累赘，好比 StatefulWidget/StateLessWidget区别、Container/Center/Text基础控件等。