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;/*** 倒计时时…

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…

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}

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;…

09-Flutter移动电商实战-移动商城数据请求实战

09-Flutter移动电商实战-移动商城数据请求实战 1、URL接口管理文件建立 第一步需要在建立一个URL的管理文件&#xff0c;因为课程的接口会一直进行变化&#xff0c;所以单独拿出来会非常方便变化接口。当然工作中的URL管理也是需要这样配置的&#xff0c;以为我们会不断的切换…

Android 串口开发,发送串口命令,读卡,反扫码,USB通讯,实现demo。——持续更新

应用场景&#xff1a;APP发送串口命令到打印机&#xff0c;打印相应数据小票 // 串口 implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1 1、获取全部串口地址devicePath private String[] mDevices; public void getcuankou(){SerialPortFinder…

10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果

10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果 1、引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式&#xff0c;无限轮播&#xff0c;Android和IOS双端适配. 好牛X得介绍&#xff0c;一般敢用“最”的一般都是神级大神&#xff0c;看到这个介绍后我也是…

工作271:打开弹出框调用当前页面接口

<template><div><button-dialogopen"open"ref"dialog"width"1000px"title"内容关联"ok-button-text"确认关联":destroy-on-close"true"ok"confirmAssociation"><!----><cus…