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 {@overrideWidget 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 {@overrideWidget 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 阅读(...) 评论(...) 编辑 收藏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 倒计时——Timer和CountDownTimer的使用,实现启动,暂停,继续,重复,重设时长以及启动service后台倒计时

实现效果 单个倒计时功能 列表倒计时功能 自定义倒计时类 public class CountDownTimerSupport implements ITimerSupport {private Timer mTimer;private Handler mHandler;/*** 倒计时时…

cin和scanf读入速度

cin慢是有原因的,其实默认的时候,cin与stdin总是保持同步的,也就是说这两种方法可以混用,而不必担心文件指针混乱,同时cout和stdout也一样,两者混用不会输出顺序错乱。正因为这个兼容性的特性,导…

03-Flutter移动电商实战-底部导航栏制作

03-Flutter移动电商实战-底部导航栏制作 1、cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机、平板电脑、台式机和其他平台提供一致&#xff…

plugin since you are using Gradle version 4.6 or above

Android studio项目在新的开发环境下打开时报错如下 解决方法如下: 1、目录选到Android状态 2、进入gradle.properties文件。 3、org.gradle.configureondemandfalse——————默认是true。改完false即可

[转]调试 smallcorgi/Faster-RCNN_TF 的demo过程遇到的问题

最近在调试faster R-CNN时,遇到了各种各样的问题。使用的算法库为https://github.com/smallcorgi/Faster-RCNN_TF 注:本文使用的是通过virtualenv 创建python虚拟环境进行调试,python 版本2.7,tensorflow 版本为tensorflow1.4-gpu…

04-Flutter移动电商实战-打通底部导航栏

04-Flutter移动电商实战-打通底部导航栏 关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager、bottomNavigationBar界面切换 1、新建4个基本dart文件 在pages目录下,我们新建下面四个dart文件。 home_page.dart :商城首页UI页面…

【机器学习】--模型评估指标之混淆矩阵,ROC曲线和AUC面积

一、前述 怎么样对训练出来的模型进行评估是有一定指标的,本文就相关指标做一个总结。 二、具体 1、混淆矩阵 混淆矩阵如图: 第一个参数true,false是指预测的正确性。 第二个参数true,postitives是指预测的结果。 相关公式: 检测正…

05-Flutter移动电商实战-dio基础_引入和简单的Get请求

05-Flutter移动电商实战-dio基础_引入和简单的Get请求 这篇开始我们学习Dart第三方Http请求库dio,这是国人开源的一个项目,也是国内用的最广泛的Dart Http请求库。 1、dio介绍和引入 dio是一个强大的Dart Http请求库,支持Restful API、 Fo…

16进制转10进制,以及二进制负数的补码

String sixteen "D4"; int ten Integer.parseInt(sixteen, 16);byte value (byte) ten;//解决二进制补码String ss String.valueOf(value); int wd Integer.parseInt(ss);

Jmeter——for循环控制器和if逻辑控制器

有时我们不仅仅需要用例按照简单的顺序跑,需要内嵌循环,或者条件分支,让某些用例在满足一定条件时才执行。 1、for循环控制器 此处记录两种应用的场景,一种是直接定义好要循环的变量,循环次数是固定的,写死…

06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作

06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作 上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打…

Cannot merge new index 66395 into a non-jumbo instruction!,uses or overrides a deprecated API.

老项目运行没问题。一打包就报错 解决方法——添加dexOptions android {compileSdkVersion 27dexOptions{jumboMode true}

localStorage和sessionStorage的简单使用

localStorage和sessionStorage是Web提供的两种本地存储方式。 相比较cookie而言,localStorage和sessionStorage的存储大小很大,localStorage能够长期保存,sessionStorage在会话期间保存。 localStorage用法: 1.设置: v…

08-Flutter移动电商实战-dio基础_伪造请求头获取数据

08-Flutter移动电商实战-dio基础_伪造请求头获取数据 在很多时候,后端为了安全都会有一些请求头的限制,只有请求头对了,才能正确返回数据。这虽然限制了一些人恶意请求数据,但是对于我们聪明的程序员来说,就是形同虚设…

工作269:uni--客流分析优化

<template><view><view><view id"main"><!-- 第一步 设置盒子大小 --></view></view><view><view v-for"(item,index) in 10"><view style"display: flex;justify-content: space-between;…

No virtual method diskCacheStrategy

android运行时错误。报错如下&#xff1a; java.lang.NoSuchMethodError: No virtual method diskCacheStrategy(Lcom/bumptech/glide/load/engine/DiskCacheStrategy;)Lcom/bumptech/glide/request/BaseRequestOptions; in class Lcom/bumptech/glide/request/RequestOptions…

工作270:el-dialog的open回调

<el-dialog open"DepartThrow" title"新建部门" :visible.sync"dialogFormVisible" close"close"><el-form ref"form" :rules"rules" :model"form" size"medium" v-loading"lo…