Based on Flutter video client Vistar [open source]

 

The project has been open sourced to Github: Vistor , welcome everyone to fork, star.

 

Module

 Development environment:

• Vs Code (1.30.2)
• Android Studio 3.+

Development framework (Flutter sdk: " > = 2.0.0-dev.68.0 <3.0.0 "):

• State management: Scoped_model
• Network layer: Dio
• Navigation library: Fluro

The main module is divided into homepage, selection, movie, and mine. The following is a list of functions:

• Use scoped_model state management to achieve unified state management.
• Use TabBar + TabBarView to switch between different modules on a single page.
• Use staggered_grid_view, ListView components to display the graphic list.
• Expand the list component, combined with NotificationManager to pull up to load more data, pull down to refresh the data.
• Featured content, classified display, use SliverAppBar, increase interactive dynamic effects, improve user experience.
• Custom filter menu component, combined with ScrollController to achieve sliding interaction effect.
• The code is modularized, and the component packaging realizes code reuse.

feature design

1. Use Fluro to manage the global routing, you can freely configure Scene's transition animation, handle the back button event on the Android side
2. Use Flutter's basic syntax for layout and encapsulate a series of common components, such as AnimationText, filter menu, loading status component, shared animation component, etc., to facilitate global reuse
3. The data layer uses Dio to implement Http / Https network loading, which can easily implement common configurations such as http header and link timeout.
4. Use the CachedImage component to achieve image loading cache and optimize rendering performance.
5. Introduce scoped_model state management. Scoped combines ScopedModelDescendant to set the global state structure and manage related component states.
6. Use shared_preferences to achieve localized storage of small data.
7. Use third-party font libraries to realize customized display of FontFamily.
8. Set WillPopScope to realize the home page click the back button to prompt twice quick press to exit the function.
9. On the homepage other than the Index Tab page, click the Back button to return to the Index Tab first, and then click the prompt twice to exit.
10.  ... ...

Core function analysis

(1) State management

Before the project was put into practice, it briefly analyzed the state management frameworks such as Redux and scoped_model. Finally, I chose to use scoped_model as the state framework library in the project, which facilitates the unified management of State state data in the project and reduces the code coupling between UI and Model. During use, discover how the parts under ScopedModel need to be refreshed according to State, then child must be wrapped by ScopedModelDescendant. Otherwise, the component cannot be refreshed.

(2) Routing stack

The official has provided a very convenient operation in terms of routing. Using Navigator's APIs can easily manage the routing stack. The fluro routing stack framework provides a higher level of functional encapsulation on an official basis. Can be more convenient for unified management and configuration of routing. And provides a wealth of transition animation for developers to use.

(3) Network

The official provides developers with Http api at the network layer, which is convenient for us to handle ordinary Http request operations, such as Post, Get, etc. A third-party network request library dio is used in the project. Dio is more convenient and efficient in network layer processing, and provides many advanced functions, such as request link timeout, cookie, and request interception. At the same time, connectivity is used to monitor the network status for user experience optimization.

(4) Local persistent storage

In Android native development, we usually use SharedPreferences to implement small data storage. In iOS, NSUserDefaults is used for persistent storage. In this project, we used the dart version of the third-party open source library shared_preferences. shared_preferences is implemented using the simple interest model. By using setXXX | getXXX, it is very convenient to achieve local persistent storage of data.

(5) Picture

The official provides Image | ImageAsset | ImageNetwork for developers to facilitate developers to easily load local pictures and network pictures. For user experience, a third-party image loading library cached_network_image is introduced in the project. The library provides configuration such as placeholder images during image loading and those that failed to load. Similarly, in order to reduce code duplication, its components are encapsulated as subcomponents, and the configuration is managed uniformly.

(6) List

Similar to native development, implementing lists in Flutter is very simple and fast, avoiding the cumbersome work of creating adapters in native. Only need to configure the number of lists, the item component can be completed. Similarly, in order to improve the user experience in the list, flutter_staggered_grid_view is used in the project. This library encapsulates the components such as ListView and GridView in Flutter, which can easily achieve the effects of grid layout and waterfall flow layout. It also provides responsive layout effects similar to Android.

(7) Transition animation

The official routing stack Navigator provides developers with the configuration of transition animation, such as FadeIn, FadeOut, etc. In addition to using Navigator, we can use Hero to implement shared element animation effects (SharedElement) in Android native development. Therefore, in the project, by encapsulating Hero and combining with the Image component, the shared element transition animation is realized.

(8) Video playback

In the video playback component, the official did not provide component elements. The third-party open source library video_player can realize simple video playback, and the video format is limited. Therefore, I used my own package Flutter Plugin to realize the jump to the native interface. In the future, based on the existing plug-ins, local window playback effects will be realized.

(9) Theme switching

Implementing theme switching in Flutter is relatively simple compared to native development. We only need to dynamically switch ThemeData. It is possible to use state management tools or the event_bus communication library between components.

(10) UI component optimization

As a friend who developed React Native, when the component rendering module involves business logic, in order to avoid code confusion caused by writing in render, generally components and business logic (such as State refresh operations, etc.) will be bundled out of the method, and then in Referenced in render. Then writing this in Flutter will also cause problems. We know that Flutter is divided into stateful | stateless two components. When State state data refresh is involved, it will cause repeated creation and rendering of components and increase CPU performance overhead. Therefore, the optimization method is to encapsulate the component and business code in a new StatelessWidget stateless component. Although the amount of code has increased relative to the previous one, it has improved the efficiency of UI rendering.

Project structure

资源文件夹/
lib
├── main.dart
├── common
├── components
├── config
├── constants
├── delegate
├── events
├── models
│   ├── pood
│   └── state_model
├── pages
│   ├── detail
│   └── home
│   ├── index
│   └── mine
│   ├── movie
│   └── popular
│   ├── theme
├── route
├── utils
└assets

Dependency library

  Some icons use icons. You can check the specific icon names in the official ionics documentation . Dependency mode, cd to the project root directory, execute: flutter get packages 

• gave: ^ 1.0.13
• fluro: ^1.4.0
• timeago: ^2.0.10
• scoped_model: ^1.0.1
• event_bus: ^1.0.1
• shimmer: ^0.0.6
• connectivity: ^0.3.2
• fluttertoast: ^2.2.7
• shared_preferences: ^0.4.3
• cached_network_image: ^0.5.1
• flutter_swiper: ^1.1.4
• flutter_spinkit: ^3.0.0
• flutter_staggered_grid_view: ^0.2.6
• flutter_webview_plugin: ^0.3.0+2
• video_player:

            git:

             url: https://github.com/songxiaoliang/flutter_video_player.git

Pack Apk

1. Generate a signed Keystore file and place the keystore signature file in the root directory of android / app

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2. Add constant identification under gradle.properties file

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore 
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456

3. Add the following configuration under the app's build.gradle

android { 
  ... 
  defaultConfig { 
    ... 
  } 
  signingConfigs { 
    release { 
        storeFile file(MYAPP_RELEASE_STORE_FILE) 
        storePassword MYAPP_RELEASE_STORE_PASSWORD 
        keyAlias MYAPP_RELEASE_KEY_ALIAS 
        keyPassword MYAPP_RELEASE_KEY_PASSWORD 
    } 
  } 
  buildTypes { 
    release { 
      // signingConfig signingConfigs.debug
      signingConfig signingConfigs.release 
    } 
  }
}

5. Enter the project root directory, the terminal executes the following commands:

flutter build apk  // 默认携带 --release

The flutter build apk will default to the release version of the installation package, and the apk file will be generated in the android / app / build / outputs / apk / directory.

Renderings