flutter#

1
void main() {
2
  print('hello, world');
3
}

1
void main() {
2
  var a = 3;
3
  int b = 4;
4

5
  const c = 10;
6
  final d = 100;
7

8
  dynamic e = 'hello, world';
9
}

1
void main() {
2
  // int
3
  var a = 1;
4
  print(a);
5

6
  // double
7
  var b = 3.14;
8
  print(b);
9

10
  // string
11
  // ${exp} 字符串变量解析。恩，有点像 shell
12
  var s = '$a + $b = ${a + b}';
13
  print(s);
14

15
}

1
bool isZero(int n) {
2
  return n == 0;
3
}
4

5
// 在 [] 中代表可选参数
6
bool isZero([int n]) {
7
  if (n != null) {
8
    return n == 0;
9
  }
10
  return false;
11
}
12

13
// 默认参数
14
bool isZero([int n = 0]) {
15
  if (n != null) {
16
    return n == 0;
17
  }
18
  return false;
19
}
20

21
// 箭头函数
22
// 如 javascript 一样，相比 js 而言它只是少了一个 = 等于号
23
// javascript 👉 const isZero = (n) => n === 0;
24
bool isZero(int n) => n == 0;
25

26

27
// 匿名函数
28
// 如 javascript 一样，相比 js 而言参数必须带括号
29
[1, 2, 3].map((x) => x+1);
30
[1, 2, 3].map((x) {
31
  return x + 1;
32
});

1
class Point {
2
  final num x;
3
  final num y;
4
  final num z;
5

6
  Point(x, y): x = x, y = y, z = x + y;
7
}
8

9
void main() {
10
  var p = Point(3, 4);
11
  print(p.z);
12
}

1
// 与 js 的不同就是，dart 把 async 写到最后边了...
2
Future fetch() async {
3
  var res = await request.get();
4
}

1
Text(
2
  textDirection: TextDirection.ltr
3
)

1
Row {
2
  display: flex;
3
  flex-direction: row;
4
}
5

6
Column {
7
  display: flex;
8
  flex-direction: column;
9
}

1
IconButton(
2
  icon: Icon(Icons.share),
3
  color: Colors.white,
4
  tooltip: '分享到朋友圈',
5
  onPressed: () { print('Icon Share'); },
6
),

1
class MyTabbedPage extends StatefulWidget {
2
  const MyTabbedPage({ Key key }) : super(key: key);
3
  @override
4
  _MyTabbedPageState createState() => _MyTabbedPageState();
5
}
6

7
// with 操作符代表一个 Mixin，在创建 TabController 时会用到
8
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
9
  final List<Tab> myTabs = <Tab>[
10
    Tab(text: 'LEFT'),
11
    Tab(text: 'RIGHT'),
12
  ];
13

14
  TabController _tabController;
15

16
  @override
17
  void initState() {
18
    super.initState();
19
    _tabController = TabController(vsync: this, length: myTabs.length);
20
  }
21

22
  @override
23
  void dispose() {
24
  _tabController.dispose();
25
    super.dispose();
26
  }
27

28
  @override
29
  Widget build(BuildContext context) {
30
    return Scaffold(
31
      appBar: AppBar(
32
        // TabBar 由两部分组成，一部分为上边的 label，另一部分为下边的横线 indicator
33
        bottom: TabBar(
34
          controller: _tabController,
35
          tabs: myTabs,
36
          // tab 下的横线大小，label 表示尽可能小，tab 表示尽可能大
37
          indicatorSize: TabBarIndicatorSize.label,
38
        ),
39
      ),
40
      // tab容器，在指向特定tab时所呈现的内容
41
      body: TabBarView(
42
        controller: _tabController,
43
        children: myTabs.map((Tab tab) {
44
          return Center(child: Text(tab.text));
45
        }).toList(),
46
      ),
47
    );
48
  }
49
}

1
Center(
2
  child: Container(
3
    width: 300,
4
    height: 300,
5
    color: Colors.red,
6
  ),
7
);

1
Center(
2
  child: Column(
3
    mainAxisSize: MainAxisSize.min,
4
    crossAxisAlignment: CrossAxisAlignment.center,
5
    children: [
6
      Text('hello, world', textDirection: TextDirection.ltr),
7
      Text('hello, world', textDirection: TextDirection.ltr),
8
      Text('hello, world', textDirection: TextDirection.ltr),
9
    ],
10
  ),
11
);

1
Center(
2
  child: Row(
3
    textDirection: TextDirection.ltr,
4
    children: [
5
      Container(
6
        width: 80.0,
7
        color: Colors.red,
8
      ),
9
      Expanded(
10
        child: Container(
11
          color: Colors.white
12
        )
13
      ),
14
      Container(
15
        width: 80.0,
16
        color: Colors.blue,
17
      ),
18
    ],
19
  ),
20
);

1
Center(
2
  child: Row(
3
    textDirection: TextDirection.ltr,
4
    children: [
5
      Expanded(
6
        child: Container(
7
          color: Colors.white
8
        )
9
      ),
10
      Expanded(
11
        child: Container(
12
          color: Colors.red
13
        )
14
      ),
15
      Expanded(
16
        child: Container(
17
          color: Colors.blue
18
        )
19
      ),
20
      Expanded(
21
          child: Container(
22
            color: Colors.red
23
          )
24
      ),
25
      Expanded(
26
          child: Container(
27
            color: Colors.white
28
          )
29
      ),
30
    ],
31
  )
32
);

1
import 'package:flutter/material.dart';
2

3
void main() => runApp(App());
4

5
class App extends StatelessWidget {
6
  Widget build(BuildContext context) {
7
    return Counter();
8
  }
9
}
10

11
class Counter extends StatefulWidget {
12
  @override
13
  _CounterState createState() => _CounterState();
14
}
15

16
class _CounterState extends State<Counter> {
17
  // 状态都放在 State 的属性里边
18
  int _count = 0;
19

20
  @override
21
  Widget build(BuildContext context) {
22
    // 设置垂直居中
23
    return Center(
24
      child: Column(
25
        mainAxisSize: MainAxisSize.min,
26
        crossAxisAlignment: CrossAxisAlignment.center,
27
        children: [
28
          // +1 的按钮，被 GestureDetector 包裹监听事件
29
          GestureDetector(
30
            onTap: () {
31
              // 监听 Tap 事件，监听对 _count 进行自增
32
              setState(() {
33
                _count += 1;
34
              });
35
            },
36
            child: Container(
37
              child: Text('点击 +1', textDirection: TextDirection.ltr),
38
            ),
39
          ),
40
          Text(_count.toString(), textDirection: TextDirection.ltr)
41
        ]
42
      )
43
    );
44
  }
45
}

1
// 跳转路由
2
Navigator.push(
3
  context,
4
  // 一般使用 MaterialPageRoute 进行路由控制，当然你也可以自定义路由
5
  MaterialPageRoute(builder: (context) => SecondRoute()),
6
);
7

8
// 返回上一级
9
Navigator.pop(context);

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(MaterialApp(
5
    title: 'Navigation Basics',
6
    home: FirstRoute(),
7
  ));
8
}
9

10
class FirstRoute extends StatelessWidget {
11
  @override
12
  Widget build(BuildContext context) {
13
    return Scaffold(
14
      appBar: AppBar(
15
        title: Text('First Route'),
16
      ),
17
      body: Center(
18
        child: RaisedButton(
19
          child: Text('Open route'),
20
          onPressed: () {
21
            Navigator.push(
22
              context,
23
              MaterialPageRoute(builder: (context) => SecondRoute()),
24
            );
25
          },
26
        ),
27
      ),
28
    );
29
  }
30
}
31

32
class SecondRoute extends StatelessWidget {
33
  @override
34
  Widget build(BuildContext context) {
35
    return Scaffold(
36
      appBar: AppBar(
37
        title: Text("Second Route"),
38
      ),
39
      body: Center(
40
        child: RaisedButton(
41
          onPressed: () {
42
            Navigator.pop(context);
43
          },
44
          child: Text('Go back!'),
45
        ),
46
      ),
47
    );
48
  }
49
}

1
Navigator.push(
2
  context,
3
  MaterialPageRoute(builder: (context) => SecondRoute(props)),
4
);

1
const routes = {
2
  '/admin': Admin,
3
  '/user': User
4
}

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(MaterialApp(
5
    title: 'Named Routes Demo',
6
    initialRoute: '/',
7
    routes: {
8
      '/': (context) => FirstScreen(),
9
      '/second': (context) => SecondScreen(),
10
    },
11
  ));
12
}
13

14
class FirstScreen extends StatelessWidget {
15
  @override
16
  Widget build(BuildContext context) {
17
    return Scaffold(
18
      appBar: AppBar(
19
        title: Text('First Screen'),
20
      ),
21
      body: Center(
22
        child: RaisedButton(
23
          child: Text('Launch screen'),
24
          onPressed: () {
25
            Navigator.pushNamed(context, '/second');
26
          },
27
        ),
28
      ),
29
    );
30
  }
31
}
32

33
class SecondScreen extends StatelessWidget {
34
  @override
35
  Widget build(BuildContext context) {
36
    return Scaffold(
37
      appBar: AppBar(
38
        title: Text("Second Screen"),
39
      ),
40
      body: Center(
41
        child: RaisedButton(
42
          onPressed: () {
43
            Navigator.pop(context);
44
          },
45
          child: Text('Go back!'),
46
        ),
47
      ),
48
    );
49
  }
50
}

1
import 'dart:convert';

1
import 'package:flutter/material.dart';

1
import 'package:url_launcher/url_launcher.dart';
2
import 'package:graphql_flutter/graphql_flutter.dart';

1
import 'dart:convert' show json;

1
dependencies:
2
  url_launcher: ^5.0.2

1
Response response;
2
Dio dio = new Dio();
3

4
response = await dio.get('/')
5
response = await dio.post('https://shici.xiange.tech/graphql', data: { 'query': '{ping}' });
6

7
// {"data":{"ping":"pong"}}
8
print(response)
9

10
// 'pong'
11
print(response.data['data']['ping']);

1
import 'dart:convert' show json;
2

3
var s = '{"name": "shanyue"}'
4

5
Map<String, dynamic> user = json.decode(s);
6

7
print(user['name'])

1
{
2
  loading <Loading /> : <Page />
3
}

1
import 'package:shared_preferences/shared_preferences.dart';
2

3
SharedPreferences prefs = await SharedPreferences.getInstance();
4
prefs.setInt('count', 100);
5
final count = prefs.getInt('counter');