使用vscode 创建flutter项目 切换默认语言
1.打开vs设置(User Settings)-扩展(Extensions)-Dart&Flutter
2.搜索Android Language 或者 IOSLanguage
3.切换默认

image.png

• 搭建一个简单的listview页面和一些简单交互

  
  
  image.png

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '奥利给',
      home: AoligePage(),
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
    );
  }
}

//创建一个有状态（可交互）的widget（类似于ios中的view）
class AoligePage extends StatefulWidget {
  @override
  createState() => new AoligePageState();
}

class AoligePageState extends State<AoligePage> {
  final _rowsA = ['row1', 'row2', 'row3', 'row4', 'row5'];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  final _saved = new Set<String>();
  //创建一个返回widget的方法
  Widget _buildRows() {
    //listview和lisview.build是有区别的 可以看文档
    return new ListView.builder(
      padding: const EdgeInsets.all(10.0),
      //类似于ios中的cellforitem:
      itemBuilder: (context, i) {
        if (i < _rowsA.length) {
          return _buildCell(_rowsA[i]);
        } else {
          return null;
        }
      },
    );
  }

  //布局ListTile(类似cell) 并返回
  Widget _buildCell(String name) {
    final isSelect = _saved.contains(name);
    return ListTile(
      title: new Text(
        name,
        style: _biggerFont,
      ),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(
            'http://pics0.baidu.com/feed/9c16fdfaaf51f3deffd9dc4faf994b1a3a29792a.jpeg?token=659fad1a6be6e70c89e63db8c98e41ae&s=1E24C704C263110B1EA6A0F503008022'),
      ),
      trailing: new Icon(
        Icons.favorite,
        color: isSelect ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          //如果使用listview 这里调用setState就不会刷新内容
          if (isSelect) {
            _saved.remove(name);
          } else {
            _saved.add(name);
          }
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('奥利给'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _push)
        ],
      ),
      body: _buildRows(),
    );
  }

  void _push() {
    Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
      final tiles = _saved.map((name) {
        return new ListTile(
          title: new Text(
            name,
            style: _biggerFont,
          ),
        );
      });
      //包装tiles 每个tile添加分割线
      final divided = ListTile.divideTiles(
        context: context,
        tiles: tiles,
      ).toList();

      return new Scaffold(
        appBar: new AppBar(
          title: new Text('收藏夹'),
        ),
        body: new ListView(children: divided),
      );
    }));
  }
}