02.Flutter实战建立项目和编写入口文件

创建项目:

flutter create flutter_shop

创建完成之后呢,它会提示我们,

进入flutter_shop的目录,然后执行flutter run来运行项目

为什么起名flutter_shop用下划线的形式呢?因为在windows下不支持小驼峰和大驼峰的命名方式,官方推荐我们使用下划线的形式

做项目的时候,外层都套一个Container组件呢,这样会使你以后扩展会变的很容易

开始写入口文件main.dart

新建文件夹Pages,所有的UI页面都放在Pages页面下面

新建index_page.dart页面。官方推荐使用下划线的方式,这里我也使用下划线的方式去命名页面的文件。

在main.dart页面引入我们的index_page页面

查看效果:

代码;

import 'package:flutter/material.dart';
import './pages/index_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child:MaterialApp(
title:'百姓生活+',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.pink
),
home: IndexPage(),
)
);
}
}

main.dart

import 'package:flutter/material.dart';

class IndexPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('百兴生活+'),),
body: Center(
child: Text('百姓生活+'),
),
);
}
}

index_page.dart

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

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

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

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

    环境搭建请参考之前写的一篇文章:Flutter_初体验_创建第一个应用 1.创建项目 采用AndroidStudio构建本项目,FIle>New>New Flutter Project… ...

  3. Flutter实战视频-移动电商-15.首页_商品推荐模块编写

    15.首页_商品推荐模块编写 商品推荐,我们做成可以横向滚动的 分析: 上面是标题,下面是ListView,里面是一个Column, column分三层,第一是图片,第二是价格,第三是市场价格 小细节 ...

  4. Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧

    17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...

  5. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  6. Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用

    47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...

  7. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

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

    03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...

  9. Flutter实战视频-移动电商-05.Dio基础_引入和简单的Get请求

    05.Dio基础_引入和简单的Get请求 博客地址: https://jspang.com/post/FlutterShop.html#toc-4c7 第三方的http请求库叫做Dio https:/ ...

随机推荐

  1. Ansible 汇总

    不错的博客:https://www.cnblogs.com/EWWE/p/8146083.html 修改文件权限: 首先需要 vi /etc/ansible/hosts (用pip install, ...

  2. 轻松搞定RabbitMQ(六)——主题

    转自 http://blog.csdn.net/xiaoxian8023/article/details/48806871 翻译地址:http://www.rabbitmq.com/tutorials ...

  3. Linux的基本使用

    检测某个地址是否可以通信:ping xx.xx.xx.xx 检测某个端口是否开启:telnet xx.xx.xx.xx port 端口:用来区别不同服务 常用命令: 创建一个目录 /data mkdi ...

  4. Deployment相对ReplicaSet优势

    系列目录 RS与Deployment主要用于替代RC.RS的全称为Replica Set.相对于RC,RS与Deployment的优势如下: RC只支持基于等式的selector,如env=dev或者 ...

  5. IOS 学习记录

    表情排列 // // MJViewController.m // 01-表情排列 // // Created by apple on 13-11-24. // Copyright (c) 2013年 ...

  6. shell脚本定时任务 ( linux系统)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGV5YW5nanVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  7. 怎么样获得泛型T的Class对象?

    public class GenClass<T> { private Class<T> entityClass; } public class Test { public st ...

  8. MongoDB——mongo-connector同步到ES

    1.搭建完毕MongoDb复制集环境 2.开始安装 mongo-connector pip install mongo-connector:基于pip命令,不管是linux .window 系统默认有 ...

  9. Two-Factor Authentication 2FA

    About two-factor authentication - User Documentation https://help.github.com/articles/about-two-fact ...

  10. Cocos2d-JS开发中的一些小技巧

    1.获取URL中的请求参数的值----此方法接收参数名 function getQueryString(name) { var reg = new RegExp("(^|&)&quo ...