# Movie 6 Code Test
I recently received a code test when I was looking for a job. I was using iOS native to develop, but I learn flutter recently, so I ended up choose flutter.
According to requirements, I need to complete three views
|Movie List (Grid)||Movie List (List)||Movie List (Movie Detail)|
# Site Map
- The outermost layer is
- The second tab is Movie List page, other page is Empty page.
- Movie List page have two display modes, user can click switch button to switch mode
- Grid View (UICollectionView)
- List View (UITableViewController)
- When user click Grid or List cell, will navigate to Movie Detail page
- Top of Movie Detail page have swiper to display video preview or image
lib ├── main.dart ├── api │ ├── movie6_api.dart │ └── network.dart ├── models │ ├── swiperModel.dart │ └── movies.dart ├── widgets │ ├── Movie_ListItem.dart │ ├── Component.dart │ └── Movie_GridItem.dart └── pages ├── MovieDetail.dart ├── MovieList.dart └── EmptyPage.dart
Because this is my first time using flutter, so I just use the simplest and original way, did not try tools like state management such as BLoC Architecture and Provider, but I think if want to continue to complete the app It is necessary to use state management.
# Problems of developing
# json to model
API return information is more complicated, I do n’t want to enter it manually and there are keys using Chinese characters.
- since json have Chinese characters, tool cannot recognized correctly
- Cannot find relation of the column, eg:
infoDict.Categorythere are actually 5 types
IIB, IIA, TBC, I, III, should use datatype
Empty, but the tool Identified as
I finally found Paste JSON as Code • quicktype (opens new window), it solve the above problems well, i only need modify chinese key to english.
# Video thumbnail in Movie detail
Top of Movie detail page, i need show video thumbnail and image in swiper.
In API result image url is
screenShots, video is
So, i need use
multitrailers youtube url get video thumbnail.
According to stackoverflow, I need to extract the
youtube id from the url and fill
youtube id in this format url.
I using Regex to extract the