Flutter移动电商实战 --（2）建立项目和编写入口文件

1、创建项目

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

创建后的项目如下图所示：

我们着重需要注意一下几个文件夹,其他的暂时不用理会

文件夹作用androidandroid平台相关代码iosios平台相关代码libflutter相关代码，我们主要编写的代码就在这个文件夹pubspec.yaml配置文件，一般存放一些第三方的依赖。

2、编写入口文件

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(), ) ); } }

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

3、最后补充

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

 

转载于:https://www.cnblogs.com/crazycode2/p/11220203.html

相关资源：flutter移动电商实战.zip