一个 Demo 入门 Flutter

         
      
       
        
1
2
3
4
5
6
7
8
       
        
blocs/
widgets/
models/
pages/
routes/
services/
main.dart
env.dart

         
      
       
        
1
2
3
4
5
6
       
        
import 'package:topmovies/models/movie.dart';

abstract class API {
  Future<MovieEnvelope> getMovieList(int start);
  Future<Movie> getMovie(String movieID);
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
       
        
class MockAPI extends API {
  @override
  Future<Movie> getMovie(String movieID) {
    return createMockMovieWithTitle('我是电影 $movieID');
  }

  @override
  Future<MovieEnvelope> getMovieList(int start) {
    // 现在还用不着
    return null;
  }
}

         
      
       
        
1
2
3
4
5
       
        
import 'services/api.dart';

class Env {
  static API apiClient;
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
       
        
class MoviesBloc extends BlocBase {
  final BehaviorSubject<MovieEnvelope> _movieEnvelope = BehaviorSubject();
  var _currentStart = 0;

  Observable<MovieEnvelope> get movieEnvelope => _movieEnvelope.stream;

  MoviesBloc() {
    _getMovies();
  }

  _getMovies() {
    Env.apiClient.getMovieList(_currentStart).then((movieEnvelope) {
      var newMovieEnvelope = movieEnvelope;
      if (_movieEnvelope.value != null) {
        newMovieEnvelope.movies = _movieEnvelope.value.movies
          ..addAll(movieEnvelope.movies);
      }
      _movieEnvelope.add(newMovieEnvelope);
      _currentStart = movieEnvelope.movies.length;
    });
  }
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
       
        
class Movies extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MoviesState();
  }
}

class _MoviesState extends State<Movies> {
  @override
  Widget build(BuildContext context) {

    final bloc = BlocProvider.of<MoviesBloc>(context);

    return StreamBuilder<MovieEnvelope>(
        stream: bloc.movieEnvelope,
        builder: (context, snapshot) {
        // snapshot.data 就是最新的内容
        // 返回一个新的 widget 即可
        })
  }
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
       
        
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        bloc: MoviesBloc(),
        child: MaterialApp(
          title: 'Douban Movie Top 250',
          home: Home(),
        ));
  }
}

         
      
       
        
1
2
3
4
5
6
       
        
static T of<T extends BlocBase>(BuildContext context) {
  final type = _typeOf<BlocProvider<T>>();
  // 这句话的意思就是从当前 context 向上找，找到第一个该类型的实例为止，找不到就返回 null
  BlocProvider<T> provider = context.ancestorWidgetOfExactType(type);
  return provider.bloc;
}

         
      
       
        
1
2
3
4
5
       
        
GridView.builder(
  gridDelegate: // 提供最终的布局信息，x,y,width.height
  itemCount: // 一共有多少元素
  itemBuilder: (context, index) {} // 每个 item 具体长啥样
);

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
       
        
abstract class SliverGridLayout {
  /// 针对某个 scroll 的偏移量，最小的 index 是多少
  int getMinChildIndexForScrollOffset(double scrollOffset);

  /// 针对某个 scroll 的偏移量，最大的 index 是多少
  int getMaxChildIndexForScrollOffset(double scrollOffset);

  /// 给一个 index，告诉我它的 x,y,width,height
  SliverGridGeometry getGeometryForChildIndex(int index);

  /// 这些 childcount 一共能产生多大的偏移量
  /// 知道了这个信息后，系统就可以展示滚动条的长短了
  double computeMaxScrollOffset(int childCount);
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
       
        
class RealAPI extends API {
  @override
  Future<MovieEnvelope> getMovieList(int start) async {
    var client = HttpClient();
    var request = await client.getUrl(Uri.parse(
        'https://api.douban.com/v2/movie/top250?start=$start&count=40'));
    var response = await request.close();
    var responseBody = await response.transform(utf8.decoder).join();
    Map data = json.decode(responseBody);
    return MovieEnvelope.fromJSON(data);
  }

  @override
  Future<Movie> getMovie(String movieID) async {
    // 暂时还用不到，先忽略
    return null;
  }
}

         
      
       
        
1
2
3
4
       
        
void main() {
  Env.apiClient = RealAPI();
  runApp(MyApp());
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
       
        
class Router {
  static var _routerEntry = _Router(name: '');

  // param should wrap with {}, eg: /movie/{id}
  static register(String pattern, WidgetBuilder widgetBuilder) {
    final patternSections = pattern.split('/');
    var routerEntry = _routerEntry;
    for (int i = 0; i < patternSections.length; i++) {
      final _pattern = patternSections[i];
      final _router = _Router(name: _pattern);
      if (i == patternSections.length - 1) {
        _router.widgetBuilder = widgetBuilder;
      }
      routerEntry.addChild(_router);
      routerEntry = _router;
    }
  }

  static Widget getWidget(String url, BuildContext context, {Map params}) {
    final urlSections = url.split('/');
    var routerEntry = _routerEntry;
    Widget widget;
    Map urlParams = {};

    for (int i = 0; i < urlSections.length; i++) {
      final _urlSection = urlSections[i];
      var found = false;
      for (_Router _router in routerEntry.children) {
        if (_router.name == _urlSection || _router.name.startsWith('{')) {
          if (_router.name.startsWith('{')) {
            final param = _router.name.substring(1, _router.name.length - 1);
            urlParams[param] = _urlSection;
          }
          found = true;
          routerEntry = _router;
          if (i == urlSections.length - 1) {
            if (_router.widgetBuilder != null) {
              widget =
                  _router.widgetBuilder(context, urlParams, params: params);
            }
          }
        }
      }

      if (!found) {
        break;
      }
    }

    return widget;
  }
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       
        
class Routes {
  static String root = '/';
  static String detail = '/movie/{id}';

  static configureRoutes() {
    Router.register(root, (BuildContext context, Map urlParams, {Map params}) {
      return Home();
    });

    Router.register(detail, (BuildContext context, Map urlParams,
        {Map params}) {
      return MoviePage(
        movieID: urlParams['id'],
        movie:
            params != null && params['movie'] != null ? params['movie'] : null,
      );
    });
  }
}

         
      
       
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
       
        
Widget build(BuildContext context) {
  return Scaffold(
      backgroundColor: Color(0xfff4f4f4),
      body: BlocProvider(
        bloc: bloc,
        child: (() {
          if (movie == null) {
            return Center(
              child: Text('loading'),
            );
          } else {
            return NotificationListener<TabSwitchNotification>(
              onNotification: (notification) {
                setState(() {
                  currentTabType = notification.tabContentType;
                });
              },
              child: DefaultTabController(
                  length: 2,
                  child: SafeArea(
                      top: false,
                      child: CustomScrollView(
                        slivers: <Widget>[
                          MovieHero(),
                          SliverToBoxAdapter(
                            child: MovieSummary(),
                          ),
                          SliverToBoxAdapter(
                            child: MovieActors(),
                          ),
                          SliverPadding(
                            padding: EdgeInsets.all(7.0),
                          ),
                          MovieReviewTabbar(),
                          MovieReviewTabbarContent(
                            tabContentType: currentTabType,
                          ),
                        ],
                      ))),
            );
          }
        }()),
      ));
}