如何如何使用Flutter开发一款电影APP详解

前言使用Flutter开发一款App是一件非常愉快的事情，其出色的性能、跨多端以及数量众多的原生组件都是我们选择Flutter的理由！今天我们就来使用Flutt

前言

使用Flutter开发一款App是一件非常愉快的事情，其出色的性能、跨多端以及数量众多的原生组件都是我们选择Flutter的理由！今天我们就来使用Flutter开发一款电影类的App，先看下App的截图。

从main.dart开始

在Flutter里main.dart是应用开始的地方:

import 'package:flutter/material.dart';import 'package:movie/utils/router.dart' as router;void main() => runApp(MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) {  return MaterialApp(   debugShowCheckedModeBanner: false,   title: '电影',   theme: ThemeData(    primarySwatch: Colors.blue,   ),   onGenerateRoute: router.generateRoute,   initialRoute: '/',  ); }}

一般的，在Flutter中管理路由有两种方式，一种是直接使用Navigator.of(context).push()，这种方式比较适合非常简单的应用，随着应用的不断发展，逻辑越来越多，推荐使用具名路由来管理应用，本文也是使用的这种方式。直接将路由挂在MaterialApp的onGenerateRoute字段上即可，具体的路由定义放在了单独的文件中进行管理utils/router.dart:

import 'package:flutter/material.dart';import 'package:movie/screens/home.dart';import 'package:movie/screens/detail.dart';import 'package:movie/screens/videoPlayer.dart';Route<dynamic> generateRoute(RouteSettings settings) { switch (settings.name) {  case '/':   return MaterialPageRoute(builder: (context) => Home());  case 'detail':   var arguments = settings.arguments;   return MaterialPageRoute(     builder: (context) => MovieDetail(id: arguments));  case 'video':   var arguments = settings.arguments;   return MaterialPageRoute(     builder: (context) => VideoPage(url: arguments));  default:   return MaterialPageRoute(builder: (context) => Home()); }}

真是像极了前端的路由定义，先将组件import进来，然后在各自的路由中return即可。

首页

在首页中使用TabBar来展示"正在热映"和"TOP250":

import 'package:flutter/material.dart';import 'package:movie/screens/hot.dart';class Home extends StatefulWidget { Home({Key key}) : super(key: key); _HomeState createState() => _HomeState();}class _HomeState extends State<Home> with SingleTickerProviderStateMixin { TabController _tabController; @override void initState() {  super.initState();  _tabController = TabController(vsync: this, initialIndex: 0, length: 2); } @override Widget build(BuildContext context) {  return Scaffold(   appBar: AppBar(    title: TabBar(     controller: _tabController,     tabs: <Widget>[      Tab(text: '正在热映'),      Tab(text: 'TOP250'),     ],    ),   ),   body: TabBarView(    controller: _tabController,    children: <Widget>[     Hot(),     Hot(history: true),    ],   ),  ); }}

两个页面的布局是一样的，只有数据是不同的，所以我们复用这个页面Hot,传入history参数来代表是否为Top250页面

复用的Hot组件

在这个组件中，通过history字段来区分成两个页面。
在页面initState的生命周期中，请求数据，再进行相应的展示。
下拉刷新的功能是使用的RefreshIndicator组件，在其onRefresh中进行下拉时的逻辑处理。
Flutter没有直接提供上拉加载的组件，但是也是很容易实现，通过ListView的controller来做判断即可：当前滚动的位置是否到达最大滚动位置_scrollController.position.pixels == _scrollController.position.maxScrollExtent
为了获得良好的用户体验，Tab来回切换的时候，我们不希望页面重新渲染，Flutter提供了混入类AutomaticKeepAliveClientMixin，重载wantKeepAlive即可，下面是完整的代码:

import 'package:flutter/material.dart';import 'package:movie/utils/api.dart' as api;import 'package:movie/widgets/movieItem.dart';class Hot extends StatefulWidget { final bool history; Hot({Key key, this.history = false}) : super(key: key); _HotState createState() => _HotState();}class _HotState extends State<Hot> with AutomaticKeepAliveClientMixin { List _movieList = []; int start = 0; int total = 0; ScrollController _scrollController = ScrollController(); @override void initState() {  super.initState();  _scrollController.addListener(() {   if (_scrollController.position.pixels ==     _scrollController.position.maxScrollExtent) {    getMore();   }  });  this.query(init: true); } query({bool init = false}) async {  Map res = await api.getMovieList(    history: widget.history, start: init ? 0 : this.start);  var start = res['start'];  var total = res['total'];  var subjects = res['subjects'];  setState(() {   if (init) {    this._movieList = subjects;   } else {    this._movieList.addAll(subjects);   }   this.start = start + 10;   this.total = total;  }); } Future<Null> _onRefresh() async {  await this.query(init: true); } getMore() {  if (start < total) {   query();  } } @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) {  super.build(context);  return RefreshIndicator(   onRefresh: _onRefresh,   child: ListView.builder(    controller: _scrollController,    itemCount: this._movieList.length,    itemBuilder: (BuildContext context, int index) =>      MovieItem(data: this._movieList[index]),   ),  ); }}

电影的详情页面

点击单条电影时使用Navigator.pushNamed(context, 'detail', arguments: data['id']);即可跳转详情页，在详情页中通过id再请求接口获取详情:

import 'package:flutter/material.dart';import 'package:movie/widgets/detail/detailTop.dart';import 'package:movie/widgets/detail/rateing.dart';import 'package:movie/widgets/detail/actors.dart';import 'package:movie/widgets/detail/photos.dart';import 'package:movie/widgets/detail/comments.dart';import 'package:movie/utils/api.dart' as api;class MovieDetail extends StatefulWidget { final id; MovieDetail({Key key, this.id}) : super(key: key); _MovieDetailState createState() => _MovieDetailState();}class _MovieDetailState extends State<MovieDetail> { var _data = {}; @override void initState() {  super.initState();  this.init(); } init() async {  var res = await api.getMovieDetail(widget.id);  setState(() {   _data = res;  }); } @override Widget build(BuildContext context) {  return Scaffold(   body: _data.isEmpty     ? Center(child: CircularProgressIndicator(),)     : SafeArea(       child: Container(        height: MediaQuery.of(context).size.height,        width: MediaQuery.of(context).size.width,        child: ListView(         scrollDirection: Axis.vertical,         children: <Widget>[          MovieDetailTop(data: _data),          Rate(count: _data['ratings_count'], rating: _data['rating']),          Container(padding: EdgeInsets.all(10),child: Text(_data['summary'])),          Actors(directors: _data['directors'], casts: _data['casts']),          Photos(photos: _data['photos'],),          Comments(comments: _data['popular_comments']),         ],        ),       ),      ),  ); }}

在详情页面中，我们封装了一些组件，这样能让项目更加容易阅读和维护，组件的具体实现就不详细介绍了，都是一些常用的原生组件，这些组件分别是：