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

1、创建项目

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

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

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

文件夹 作用
android android平台相关代码
ios ios平台相关代码
lib flutter相关代码,我们主要编写的代码就在这个文件夹
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基础控件等。

02-Flutter移动电商实战-建立项目和编写入口文件的更多相关文章

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

    02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flut ...

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

    1.创建项目 采用AndroidStudio构建本项目,FIle>New>New Flutter Project… 创建后的项目如下图所示: 我们着重需要注意一下几个文件夹,其他的暂时不用 ...

  3. Flutter移动电商实战 --(9)移动商城数据请求实战

    1.URL接口管理文件建立 第一步需要在建立一个URL的管理文件,因为课程的接口会一直进行变化,所以单独拿出来会非常方便变化接口.当然工作中的URL管理也是需要这样配置的,以为我们会不断的切换好几个服 ...

  4. Flutter移动电商实战 --(3)底部导航栏制作

    1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...

  5. Flutter移动电商实战 --(1)项目学习记录

    1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swi ...

  6. Flutter移动电商实战 --(52)购物车_数据模型建立和Provide修改

    根据json数据生成模型类 {"goodsId":"2171c20d77c340729d5d7ebc2039c08d","goodsName" ...

  7. Flutter移动电商实战 --(37)路由_Fluro引入和商品详细页建立

    https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 fluro: ^1.4.0 如果网络上下载不 ...

  8. Flutter移动电商实战 --(29)列表页_商品列表数据模型建立

    简历数据模型 json生成dart类的网站: https://javiercbk.github.io/json_to_dart/ json数据 {"code":"0&qu ...

  9. Flutter移动电商实战 --(11)首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

随机推荐

  1. 洛谷P3984-数据结构 题解

    题面 这题精,真的精 前言:不要被题目背景和描述误导! Solution: 题目大意 给定一段序列,请你做到区间修改和区间询问. 区间询问即 在 \(L\) 到 \(R\) 区间内,乘上下标后取模的值 ...

  2. python教程:用简单的Python编写Web应用程序

    python现在已经成为很多程序员关注的编程语言之一,很多程序员也都开始弄python编程,并且很多时候都会用自己的操作来选择,而现在不管是程序员还是少儿编程,都会有python这门课,今天就和大家分 ...

  3. RabbitMQ之消息模式(下)

    目的: RabbitMQ之消息模式(上):https://www.cnblogs.com/huangting/p/11994539.html 消费端限流 消息的ACK与重回队列 TTL消息 死信队列 ...

  4. C# 获取目录路径

    Console.WriteLine(System.Windows.Forms.Application.StartupPath);//获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称.(Wi ...

  5. 1005 继续(3n+1)猜想(C#)

    一.题目内容: 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n= ...

  6. Python进阶(三)----函数名,作用域,名称空间,f-string,可迭代对象,迭代器

    Python进阶(三)----函数名,作用域,名称空间,f-string,可迭代对象,迭代器 一丶关键字:global,nonlocal global 声明全局变量: ​ 1. 可以在局部作用域声明一 ...

  7. IOWebSocketChannel.connect handle errors

    https://github.com/dart-lang/web_socket_channel/issues/38 yes, my workaround is to create a WebSocke ...

  8. 学习笔记之三十年软件开发之路 - Things I Learnt The Hard Way (in 30 Years of Software Development)

    三十年软件开发之路 https://mp.weixin.qq.com/s/EgN-9bIHonRid1DM0csQDw https://blog.juliobiason.net/thoughts/th ...

  9. vip视频播放

    插件  Tampermonkey https://greasyfork.org/zh-CN

  10. 【python】udp 数据的发送和接收

    import socket def send_message(): # 创建一个udp套接字 udp_socker = socket.socket(socket.AF_INET,socket.SOCK ...