This document outlines the structure and features of a Flutter movie app. It discusses the folder structure, API integration using Dio, data models, repositories, and key pages including the home, search, theater, and movie info pages. Widgets are created using StatefulWidget or StatelessWidget. Pages load data asynchronously using the API and callbacks. Interactive elements like expansion tiles on the theater page are implemented using animations.

1. Flutter 4
Warren,George

2. Agenda
• Beginning
• Folder Struct
• API, Model
• Home Page
• Search Page
• Theater Page
• Movie Info Page

3. Beginning
• inKino (open source)
• Search source: IMDB,
TMDB, 豆瓣, 開眼電影網
• Feature ?

4. Demo project
• https://github.com/WarrenLin/
FlutterMovie

5. Folder Struct
• assets
• data
• images
• model
• repository
• view
• page
• widget

6. API, Model
• Source: 豆瓣
• in theater -
https://api.douban.com/v2/movie/in_theaters?city=%E
5%B9%BF%E5%B7%9E&start=0&count=10
• search -
https://api.douban.com/v2/movie/search?q=%E7%A5
%9E%E7%A7%98%E5%B7%A8%E6%98%9F&start
=0&count=10
• info -
https://api.douban.com/v2/movie/subject/26942674

7. API, Model
• Dart package - dio
• Sample
• get
• post
import 'package:dio/dio.dart';
void getHttp() async {
try {
Response response = await Dio().get("http://www.baidu.com");
print(response);
} catch (e) {
print(e);
}
}
response = await dio.post("/test", data: {"id": 12, "name": "wendu"});

8. API, Model
• Create model.

9. API, Model
• Create repository.

10. Let's create a Widget
1. 如何建立? StatefulWidget StatelessWidget
2. 程式進入點
3. initState初始化作業
• PageState
• ScrollController & TextEditingController (SearchPage)
• call Api (HomePage)
4. build(BuildContext context) =>Widget
5. setState() 回到5.
建構式 initState() build() dispose()
setState()

11. MainPage
• build(BuildContext context)
• _tabSelected(int newIndex)

12. HomePage

13. HomePage
• Data model - HomePage & SearchPage

14. HomePage
• initState()
• PageStatus
• _getMovieByApi()
• setLoading(bool isLoading)

15. HomePage - build
• build(BuildContext context)

16. HomePage - GridView
• _listener()
• HomeCell

17. SearchPage

18. SearchPage - build
• initState()
• build(BuildContext context)
• Widget createEditText()

19. SearchPage - build
• searchBtnClick(String keyword)
• setSearchStatus(bool isSearch)
• _searchMovie(String keyword)

20. SearchPage - build
• Widget createContent()
• ListView _createListView()

21. SearchPage - MovieIntroCell
MovieIntroCell ({@required
this.imgUrl,@required this.title,@required
this.sorts,@required this.avgRatings,
this.alDirectors});
1
3
2

22. DetailPage

23. DetailPage
• initState()
• build(BuildContext context)

24. DetailPage
• _createBody()

25. CastWidget

26. CastWidget
ListView(
scrollDirection: Axis.horizontal,
children: castImages.map((cast) => AvatarWidget(cast)).toList(),
)
CircleAvatar(
radius: 35.0,
backgroundImage: NetworkImage(cast.avatars.large ?? ""),
backgroundColor: Colors.transparent
)

27. Theater Page

28. Theater Page
• data model

29. Theater Page
• repository

30. Theater Page
• ListView
• ExpansionTile
• Animation

31. Theater Page
• ListView
@override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
var key = _theaters.keys.toList()[index];
final List theaters = _theaters[key];
return MovieInTitles(key,
theaters.map((theater) => Theater.from(theater)).toList());
},
itemCount: _theaters?.length ?? 0));
}

32. Theater Page
• ExpansionTile
ExpansionTile(
title: Text(widget.listTitle, style: TextStyle(color: Colors.white)),
trailing: RotationTransition(
turns: animation,
child: Icon(Icons.keyboard_arrow_down, color: Colors.white),
),
onExpansionChanged: (bool) {
_changeOpacity(bool);
},
children:
widget.theaters.map((theater) => getSubTitleWidget(theater)).toList(),
)

33. Theater Page
• Animation
• AnimationController

34. Theater Page
ExpansionTile(
title: Text(widget.listTitle, style: TextStyle(color: Colors.white)),
trailing: RotationTransition(
turns: animation,
child: Icon(Icons.keyboard_arrow_down, color: Colors.white),
),
onExpansionChanged: (bool) {
_changeOpacity(bool);
},
children:
widget.theaters.map((theater) => getSubTitleWidget(theater)).toList(),
)
_changeOpacity(bool expand) {
setState(() {
if (expand) {
animationController.forward();
} else {
animationController.reverse();
}
});
}

35. Theater Page

36. Theater Page
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
Icons.theaters,
color: Colors.amber,
),
onPressed: () {
launchURL(theater.web);
}),
)
launchURL(String url) async {
print("launchURL:$url");
if (await canLaunch(url)) {
await launch(url);
}
}

37. Q & A

38. Reference
• https://blog.csdn.net/IT_czh/article/details/856178
35
• https://www.itread01.com/hkpelhkf.html
• https://github.com/jokermonn/-
Api/blob/master/DoubanMovie.md#movie_comme
nts
• https://github.com/WarrenLin/FlutterMovie
• https://github.com/maja0270558/FlutterTogether