Flutter: Twitterのプロフィール画面のようなWidget

プログラミング
スポンサーリンク




こんにちは、おみです。

Flutterで、Twitterのプロフィール画面のように、上にスライドすると上部のWidgetが縮小表示されるようなTabBar(伝われ!!)を作成しました。

使いまわせるようにクラス化したので、ソースコードと解説を載っけときます。

 

 

スポンサーリンク

ソースコード

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// ----------------------------------------
// Twitterのプロフィール画面みたいなやつ
// ----------------------------------------
class StickyTabBar extends StatelessWidget {
  // 引数
  /* タブヘッダー      */ final List<Widget> tabHeader;
  /* タブバー         */ final TabBar tabBar;
  /* タブボディー      */ final TabBarView tabBarView;
  /* スクロール       */ final bool pinned;

  // コンストラクタ
  StickyTabBar({
    Key key,
    this.tabHeader,
    this.tabBar,
    this.tabBarView,
    this.pinned = true}
      ) : assert(tabHeader != null),
        assert(tabBar != null),
        assert(tabBarView != null),
        assert(tabBar.tabs.length == tabBarView.children.length),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabBar.tabs.length,
      child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverList(
                delegate: SliverChildListDelegate(
                    tabHeader
                ),
              ),
              SliverPersistentHeader(
                pinned: pinned,
                delegate: _StickyTabBarDelegate(
                    tabBar
                ),
              ),

            ];
          },
          body: tabBarView
      ),
    );
  }
}

class _StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  const _StickyTabBarDelegate(this.tabBar);

  final TabBar tabBar;

  @override
  double get minExtent => tabBar.preferredSize.height;

  @override
  double get maxExtent => tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context,
      double shrinkOffset,
      bool overlapsContent,
      ) {
    return Container(color: Theme.of(context).primaryColor, child: tabBar);
  }

  @override
  bool shouldRebuild(_StickyTabBarDelegate oldDelegate) {
    return tabBar != oldDelegate.tabBar;
  }
}

 

 

解説

使用する際は、2つあるクラスのうち上の方「StickeyTabBar」を呼び出します。

 

引数は下記の4つです。

/* タブヘッダー      */ final List<Widget> tabHeader;
/* タブバー         */ final TabBar tabBar;
/* タブボディー      */ final TabBarView tabBarView;
/* スクロール       */ final bool pinned;

tabHeader … TabBarの上部に配置するWidget。上にスクロールすると、縮小される。

tabBar … 通常のTabBar

tabBarView … 通常のTabBarView

pinned … スクロールの可否

 

図説すると、大体こんな感じです。

 

 

 

コメント

タイトルとURLをコピーしました