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

// 想想这样省了多少变量声明  querySelect('#button')   ..text ="Confirm"   ..classes.add('important')   ..onClick.listen((e) => window.alert('Confirmed'))  

class Vector {   final int x, y;   Vector(this.x, this.y);    Vector operator +(Vector v) => Vector(x + v.x, y + v.y);   Vector operator -(Vector v) => Vector(x - v.x, y - v.y);    // Operator == and hashCode not shown. For details, see note below.   // ··· }  void main() {   final v = Vector(2, 3);   final w = Vector(2, 2);    assert(v + w == Vector(4, 5));   assert(v - w == Vector(0, 1)); } 

class Person {   final String firstName, lastName;   Person(this.firstName, this.lastName);    // Override hashCode using strategy from Effective Java,   // Chapter 11.   @override   int get hashCode {     int result = 17;     result = 37 * result + firstName.hashCode;     result = 37 * result + lastName.hashCode;     return result;   }    // You should generally implement operator == if you   // override hashCode.   @override   bool operator ==(dynamic other) {     if (other is! Person) return false;     Person person = other;     return (person.firstName == firstName &&         person.lastName == lastName);   } }  void main() {   var p1 = Person('Bob', 'Smith');   var p2 = Person('Bob', 'Smith');   var p3 = 'not a person';   assert(p1.hashCode == p2.hashCode);   assert(p1 == p2);   assert(p1 != p3); } 

loadData() async {    // 通过spawn新建一个isolate，并绑定静态方法    ReceivePort receivePort =ReceivePort();    await Isolate.spawn(dataLoader, receivePort.sendPort);    // 获取新isolate的监听port    SendPort sendPort = await receivePort.first;    // 调用sendReceive自定义方法    List dataList = await sendReceive(sendPort, 'https://hicc.me/posts');    print('dataList $dataList'); }  // isolate的绑定方法 static dataLoader(SendPort sendPort) async{    // 创建监听port，并将sendPort传给外界用来调用    ReceivePort receivePort =ReceivePort();    sendPort.send(receivePort.sendPort);     // 监听外界调用    await for (var msg in receivePort) {      String requestURL =msg[0];      SendPort callbackPort =msg[1];       Client client = Client();      Response response = await client.get(requestURL);      List dataList = json.decode(response.body);      // 回调返回值给调用者      callbackPort.send(dataList);   }     }  // 创建自己的监听port，并且向新isolate发送消息 Future sendReceive(SendPort sendPort, String url) {    ReceivePort receivePort =ReceivePort();    sendPort.send([url, receivePort.sendPort]);    // 接收到返回值，返回给调用者    return receivePort.first; } 

void test({@required int age,String name}) {   print(name);   print(age); } // 解决函数调用时候，参数不明确的问题 test(name:"hicc",age: 30) // 这样对于组件的使用尤为方便 class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {   return Scaffold(       appBar: AppBar(),       body: Container(),       floatingActionButton:FloatingActionButton()     );   } } 

// 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 ]; 

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'),         ),       ),     );   } } 

class Counter extends StatefulWidget {    // This class is the configuration for the state. It holds the    // values (in this case nothing) provided by the parent and used by the build    // method of the State. Fields in a Widget subclass are always marked "final".    @override    _CounterState createState() => _CounterState();  }    class _CounterState extends State<Counter> {    int _counter = 0;      void _increment() {      setState(() {        // This call to setState tells the Flutter framework that        // something has changed in this State, which causes it to rerun        // the build method below so that the display can reflect the        // updated values. If you change _counter without calling        // setState(), then the build method won't be called again,        // and so nothing would appear to happen.        _counter++;      });    }      @override    Widget build(BuildContext context) {      // This method is rerun every time setState is called, for instance      // as done by the _increment method above.      // The Flutter framework has been optimized to make rerunning      // build methods fast, so that you can just rebuild anything that      // needs updating rather than having to individually change      // instances of widgets.      return Row(        children: <Widget>[          RaisedButton(            onPressed: _increment,            child: Text('Increment'),          ),          Text('Count: $_counter'),        ],      );    }  }  

class GlobalData extends InheritedWidget {   final int count;   GlobalData({Key key, this.count,Widget child}):super(key:key,child:child);   @override   bool updateShouldNotify(GlobalData oldWidget) {     return oldWidget.count != count;   }    static GlobalData of(BuildContext context) => context.inheritFromWidgetOfExactType(GlobalData); }  class MyApp extends StatelessWidget {   // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Flutter Demo',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: MyHomePage(title: 'Flutter Demo Home Page'),     );   } }  class MyHomePage extends StatefulWidget {   MyHomePage({Key key, this.title}) : super(key: key);    final String title;    @override   _MyHomePageState createState() => _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> {   int _counter = 0;    void _incrementCounter() {       _counter++;     });   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(widget.title),       ),       body: GlobalData(         count: _counter,         child: Center(           child: Column(             mainAxisAlignment: MainAxisAlignment.center,             children: <Widget>[               Text(                 'You have pushed the button this many times:',               ),               Text(                 '$_counter',                 style: Theme.of(context).textTheme.display1,               ),               Body(),               Body2()             ],           ),         ),       ),       floatingActionButton: FloatingActionButton(         onPressed: _incrementCounter,         tooltip: 'Increment',         child: Icon(Icons.add),       ),     );   } }  class Body extends StatelessWidget {   @override   Widget build(BuildContext context) {     GlobalData globalData = GlobalData.of(context);     return Text(globalData.count.toString());   } }  class Body2 extends StatelessWidget {   @override   Widget build(BuildContext context) {     // TODO: implement build     GlobalData globalData = GlobalData.of(context);     return Text(globalData.count.toString());   } 

class GlobalData extends InheritedWidget {   final int count;   final Stream<String> timeInterval$ = new Stream.periodic(Duration(seconds: 10)).map((time) => new DateTime.now().toString());   GlobalData({Key key, this.count,Widget child}):super(key:key,child:child);   @override   bool updateShouldNotify(GlobalData oldWidget) {     return oldWidget.count != count;   }    static GlobalData of(BuildContext context) => context.inheritFromWidgetOfExactType(GlobalData);  }  class TimerView extends StatelessWidget {    @override   Widget build(BuildContext context) {     GlobalData globalData = GlobalData.of(context);     return StreamBuilder(         stream: globalData.timeInterval$,         builder: (context, snapshot) {           return Text(snapshot?.data ?? '');         }     );   } } 

// 测试在/test/目录下面 void main() {   testWidgets('Counter increments smoke test', (WidgetTester tester) async {     // Build our app and trigger a frame.     await tester.pumpWidget(MyApp());      // Verify that our counter starts at 0.     expect(find.text('0'), findsOneWidget);     expect(find.text('1'), findsNothing);      // Tap the '+' icon and trigger a frame.     await tester.tap(find.byIcon(Icons.add));     await tester.pump();      // Verify that our counter has incremented.     expect(find.text('0'), findsNothing);     expect(find.text('1'), findsOneWidget);   }); } 

name: app description: A new Flutter project. version: 1.0.0+1 environment:   sdk: ">=2.1.0 <3.0.0"  dependencies:   flutter:     sdk: flutter    cupertino_icons: ^0.1.2 

class MyApp extends StatefulWidget {   @override   _MyAppState createState() => new _MyAppState(); } class _MyAppState extends State<MyApp> with WidgetsBindingObserver {   @override   void initState() {     super.initState();     WidgetsBinding.instance.addObserver(this);   }    @override   void dispose() {     WidgetsBinding.instance.removeObserver(this);     super.dispose();   }    @override   void didChangeAppLifecycleState(AppLifecycleState state) {     switch (state) {       case AppLifecycleState.inactive:         print('AppLifecycleState.inactive');         break;       case AppLifecycleState.paused:         print('AppLifecycleState.paused');         break;       case AppLifecycleState.resumed:         print('AppLifecycleState.resumed');         break;       case AppLifecycleState.suspending:         print('AppLifecycleState.suspending');         break;     }     super.didChangeAppLifecycleState(state);   }    @override   Widget build(BuildContext context) {       return Container();   } }