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

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

环境搭建请参考之前写的一篇文章:Flutter_初体验_创建第一个应用

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基础控件等。

posted @ 2019-06-14 09:12 niceyoo 阅读(...) 评论(...) 编辑 收藏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

niceyoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值