flutter可以通过一套代码运行在多个平台上,包括移动,web,桌面,嵌入式,但是在 Web 平台的支持尚未达到 Beta 阶段,请不要用在生产环节,在阅读文档时候,推荐大家阅读https://flutter.cn ,这是和官方文档同步的中文网站,减少学习的成本

在flutter中,所有的内容都是widget,其是构成flutter项目的最小的单元

如果你在国内使用 Flutter,那么你可能需要找一个与官方同步的可信的镜像站点,帮助你的 Flutter 命令行工具到该镜像站点下载其所需的资源。你需要为此设置两个环境变量:“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”,然后再运行 Flutter 命令行工具。

下面所有的代码和案例都是基于编辑器vs code进行编辑,使用该编辑器和编辑器插件以获取更好的开发体验。这些插件提供了代码补全、代码高亮、widget 辅助编辑的功能,以及为项目的运行和调试提供支持等。

tip:在flutter项目中,可以通过Flutter Doctor来检查项目是否存在问题

通过vs code创建的项目目录如下,我们编写的代码主要放在lib文件夹下面,其中最重要就是lib(编写程序代码)和pubspec.yaml (相当于npm项目中的package.json,设置项目的配置项)



应用程序所需的代码在 ‘lib/main.dart’,如果想要从更高层次了解每个代码块的讲解,请看代码中的注释。

// package:这是表示系统内置的包
// 下面表示创建了一个具有 Material Design 风格的应用, Material 是一种移动端和网页端通用的视觉设计语言, Flutter 提供了丰富的 Material 风格的 widgets。
import 'package:flutter/material.dart';
// 下面表示引进第三方包english_words
import 'package:english_words/english_words.dart';
// 主函数(main)使用了 (=>) 符号,这是 Dart 中单行函数或方法的简写,也就是箭头函数,注意如果使用箭头函数,只能写一行。
void main() => runApp(MyApp());
// StatelessWidget表示无状态的组件,表示该组件内所有的状态就是不能变化,如果需要继承有状态的组件,则是StatefulWidget
class MyApp extends StatelessWidget {
// 只要调用setState方法,build就会重新加载,flutter框架的思想是来源于react
//注意一个widget主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widgets 来显示自己,可以和react中的render函数作比较。
@override
Widget build(BuildContext context) { return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
// Center widget 可以将其子 widget 树对齐到屏幕中心。
body: Center(
child: RandomWords()
),
),
);
}
} class RandomWords extends StatefulWidget {
RandomWords({Key key}) : super(key: key); @override
_RandomWordsState createState() => _RandomWordsState();
} class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return Text(wordPair.asPascalCase);
}
}



tip:

  • 尽量在Text外层套一层Container,这样可以充分的利用Container来设置width,height等
  • Row,Column是基于flexbox设计的,使用之后元素在垂直和水平位置都会居中的
  • Stack基于想对定位和绝对定位设计的

扫码关注公众号,有更多精彩文章等你哦

flutter从入门到精通三的更多相关文章

  1. iOS开发-UI 从入门到精通(三)

    iOS开发-UI 从入门到精通(三)是对 iOS开发-UI 从入门到精通(一)知识点的综合练习,搭建一个简单地登陆界面,增强实战经验,为以后做开发打下坚实的基础! ※在这里我们还要强调一下,开发环境和 ...

  2. MyBatis从入门到精通(三):MyBatis XML方式的基本用法之多表查询

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. 多表查询 上篇博客中,我们示例的 ...

  3. visual studio 2015 搭建python开发环境,python入门到精通[三]

    在上一篇博客Windows搭建python开发环境,python入门到精通[一]很多园友提到希望使用visual studio 2013/visual studio 2015 python做demo, ...

  4. flutter从入门到精通一

    Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台 flutter是基于dart语言开发的,我们将首先通过几章节 ...

  5. flutter从入门到精通五

    在flutter的世界里,一切都是Widget,图像,文本,布局模型等等,一切都是Widget flutter中,尽量将Widget放在MaterialApp.其封装了所需要的一些Widget,Mat ...

  6. flutter从入门到精通四

    widget Flutter 从 React 中吸取灵感(如果有react的编程经验,会很容易理解flutter),通过现代化框架创建出精美的组件. 它的核心思想是用 widget 来构建你的 UI ...

  7. flutter从入门到精通二

    静态方法和静态属性(static): 通过static修饰的方法和属性称为静态方法和静态属性,注意静态方法和静态属性只能通过类名访问,不能通过对象访问. 静态方法不能访问非静态的属性和非静态方法,反正 ...

  8. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  9. MyBatis 入门到精通(三) 高级结果映射

    MyBatis的创建基于这样一个思想:数据库并不是您想怎样就怎样的.虽然我们希望所有的数据库遵守第三范式或BCNF(修正的第三范式),但它们不是.如果有一个数据库能够完美映射到所有应用程序,也将是非常 ...

随机推荐

  1. python PIL/cv2/base64相互转换

    PIL和cv2是python中两个常用的图像处理库,PIL一般是anaconda自带的,cv2是opencv的python版本.base64在网络传输图片的时候经常用到. ##PIL读取.保存图片方法 ...

  2. 利用Word发布文章到cnblogs博客

    利用Word发布文章到cnblogs博客 用博客园cnblogs:http://www.cnblogs.com/博客名称/services/metablogapi.aspx,word老是提醒" ...

  3. elementUI el-table合并单元格

    合并单元格,如果id列值一致,则合并. <el-table :data="tableData6" :span-method="objectSpanMethod&qu ...

  4. H5网站接入支付宝的支付接口

    写本文章的目的是为了记录工作中遇到的问题,方便以后遇到可以迅速解决问题 H5手机网站接入支付宝的支付接口,推荐使用支付宝提供的SDK来快速开发 我使用的是SDK开发 引用命名空间 using Aop. ...

  5. layui的select下拉框太长被遮挡了的解决办法

    layui的select下拉框太长采用滚动条的形式出现,可以给select的dl加一个最大高度,具体的效果如下图 .layui-form-select dl { max-height:160px; }

  6. 【转载】 DeepMind发表Nature子刊新论文:连接多巴胺与元强化学习的新方法

    原文地址: baijiahao.baidu.com/s?id=1600509777750939986&wfr=spider&for=pc 机器之心 18-05-15   14:26 - ...

  7. java中 try catch的妙用

    程序开发中,格式转换的时候,经常由于字符串可能是其他的不可预知的符号导致,字符串转数值失败, 这个时候可以妙用try catch来解决,如下图所示.其实,很多其他不可预知的异常情况,也可以用它来处理. ...

  8. Navigator的使用:

    1.路由直接跳转到下一个页面: Navigator.pushNamed(context,"/login"); 2.跳转的下一个页面,替换当前的页面: Navigator.of(co ...

  9. 【FreeMarker】FreeMarker使用(三)

    搭建一个 1.FreeMarker取值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  10. 【Mac】解决macos安装升级时报错安装所选更新时发生错误的问题

    1 系统更新macjave 更新一直失败: 2  解决方法为:重新启动Mac,并按住Command+R进入恢复模式,找到Terminal后输入csrutil disable,然后重启Mac,再次下载并 ...