Flutter Netflix风格应用栏插件netflix_appbar的使用

Flutter Netflix风格应用栏插件netflix_appbar的使用

Dremar Design

WATCH THE VIDEO EXAMPLE

该插件将允许你模拟Netflix应用菜单的行为。

我创建的类只是一个简单的模仿，因此在较旧设备上可能会出现堆栈内存问题或图形性能问题。

如何使用它

为了使用此插件，你需要安装page_transition（至少版本1.0.0）和after_layout（至少版本1.0.5）。

导入后，你应该创建你自己的个性化状态或无状态小部件类。在你的默认main函数中，你需要创建一个对象列表并返回NetflixAppBar实例。

对象列表

让我们创建一个简单的对象列表：

// 初始化列表
List<DrTextTransitionTitleObject> titles = new List();

// 添加一个新的Widget类，这是你创建的一个
titles.add(new DrTextTransitionTitleObject("title", "slug", your_class_name()));

NetflixAppBar 参数

NetflixAppBar(List<DrTextTransitionTitleObject> titles, int duration,
    {Widget header,
    double headerHeight = 0,
    Color background = Colors.transparent,
    Color appBarColor,
    int dumping = 100,
    double titlePaddingLeft = 16,
    double titlePaddingRight = 15,
    double titleActiveFontSize = 20,
    double maxOpacity = 0.6,
    double initialOpacity = 0,
    bool pinned = false,
    TextStyle titleStyles = const TextStyle(
        color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
    Widget leading,
    Function(ScrollController, String, NetflixAppBar) onScreenChange,
    MainAxisAlignment mainAxisAlignment})

参数说明

示例

List<DrTextTransitionTitleObject> titles = new List();

titles.add(new DrTextTransitionTitleObject("Movies", "movies", Movies()));
titles.add(new DrTextTransitionTitleObject("Tv Series", "tv", Tv()));
titles.add(new DrTextTransitionTitleObject("About Me", "about", AboutUs()));

int milliseconds = 700;

TextStyle titleStyles = const TextStyle(
    fontFamily: "Dr1",
    color: Colors.white,
    fontSize: 18,
    fontWeight: FontWeight.bold);

instance = NetflixAppBar(
  titles,
  milliseconds,
  initialOpacity: 0.3,
  maxOpacity: 1,
  dumping: 100,
  titleStyles: titleStyles,
  titleActiveFontSize: 21,
  appBarColor: Colors.black,
  background: Colors.black,
  onScreenChange:
      (ScrollController controller, String slug, NetflixAppBar instance) {
    print("Controller received correctly \n We are on $slug screen");
    this.currentSlug = slug;
    this.instance = NetflixAppBar.getInstance();
    var newTitles = this.instance.titles;

    // ...

  },
);
return instance;

重要提示

在第一次屏幕切换之后，包装NetflixAppBar实例的类将被处置，所以请注意。

静态函数

getInstance()

NetflixAppBar.getInstance() 将返回当前的NetflixAppBar实例。这样你就可以获取有关当前标题、属性等信息。

getContext()

NetflixAppBar.getContext() 将返回当前NetflixAppBar实例的上下文。

notify()

NetflixAppBar.notify() 将允许你更新当前显示屏幕上图形元素。

goBack()

NetflixAppBar.goBack() 将允许你返回到上一个屏幕。

DrTextTransitionTitleObject 参数

DrTextTransitionTitleObject(String name, String heroTag, Widget function,
      {List<DrTextTransitionTitleObject> newTitles,
      bool personalized = false,
      Widget overrideWidget,
      Function overrideAction,
      TextStyle primaryStyle,
      Widget header,
      double headerHeight,
      double paddingLeft = 0})

参数说明

示例

List<DrTextTransitionTitleObject> titles = new List();
List<DrTextTransitionTitleObject> tvTitles = new List();

var movies = new Movies();
var tv = new Tv();

titles.add(new DrTextTransitionTitleObject("Movies", "movies", movies,
    header: switchHeader("movies")));
titles.add(new DrTextTransitionTitleObject("Tv Series", "tv", tv,
    newTitles: tvTitles, header: switchHeader("movies")));
titles.add(new DrTextTransitionTitleObject("About Me", "about", AboutUs()));

tvTitles.add(new DrTextTransitionTitleObject("Tv Series", "tv", tv,
    newTitles: titles,
    header: switchHeader("tv"),
    personalized: true,
    overrideWidget: Icon(
      Icons.search,
      color: Colors.white,
      size: 32,
    )));
tvTitles.add(new DrTextTransitionTitleObject("Movies", "movies", movies,
    newTitles: titles, paddingLeft: 35));