flutter从入门到精通三

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基于想对定位和绝对定位设计的

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