写给前端工程师的 Flutter 详细教程

floatingActionButton:FloatingActionButton()

);

}

}

大杀器：Collection If 和 Collection For

// collection If

Widget build(BuildContext context) {

return Row(

children: [

IconButton(icon: Icon(Icons.menu)),

Expanded(child: title),

if (!isAndroid)

IconButton(icon: Icon(Icons.search)),

],

);

}

// Collect For

var command = [

engineDartPath,

frontendServer,

for (var root in fileSystemRoots) “–filesystem-root=$root”,

for (var entryPoint in entryPoints)

if (fileExists(“lib/$entryPoint.json"))"lib/$entryPoint”,

mainPath

];

更多Dart 2.3对此的优化看这里。

Flutter 怎么写

---

到这里终于到正题了，如果熟悉web前端，熟悉React的话，你会对下面要讲的异常的熟悉。

Flutter App的一切从 lib/main.dart文件的main函数开始：

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: ‘Welcome to Flutter’,

home: Scaffold(

appBar: AppBar(

title: Text(‘Welcome to Flutter’),

),

body: Center(

child: Text(‘Hello World’),

),

),

);

}

}

Dart 类build方法返回的便是Widget，在Flutter中一切都是Widget，包括但不限于

• 结构性元素，menu，button等

• 样式类元素，font，color等

• 布局类元素，padding，margin等

• 导航

• 手势

Widget是Dart中特殊的类，通过实例化(Dart 中new是可选的)相互嵌套，你的这个App就是形如下图的一颗组件树(Dart入口函数的概念，main.dart -> main())。

Widget布局

上说过Flutter布局思路来自CSS࿰