0

やりたいこと

TwitterやInstagramなどのプロフィール画面では、一番上にバーがあり、続いてプロフィール情報、コンテンツタブ、コンテンツといった形式がよくみられると思います。この形をFlutterで再現したいです。

機能要件

コンテンツを下にスクロールできるようにする(SingleChildScrollViewを用いる?)。その際、一番上のバーは固定され、コンテンツタブは一番上のバーにぶつかるまで移動

わからないこと、これまでに試したこと

そのような形を実現するWidgetがあるかどうかを知りません。そのようなものが自分が探せてないだけであるのかもしれないと予想しているのですが、どうなんでしょうか?

TabBar関連の記事をひたすら拝見させていだだきましたが、AppBarのbottomとして利用されている例しか見つけることができませんでした。そのように利用することが通常なのでしょうか。例えばcolumnとcontainerを用いて利用したりしてみましたが、下のコンテンツスクロールの際の設定がイマイチ上手く行きませんでした。

Scaffold内のWidget構成をどのようにしたらいいかがわかりません。自分の知識の限りでWidget構成いじることにより実現できないかを模索しましたが、理想的な形にはたどり着くことができませんでした。一番上のバーはAppBarを用いています。そして、コンテンツタブ、コンテンツにはTabBarとTabBarViewを用いています。

具体的なコード例などご提示いただけるのであればとても嬉しいです。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:testproject/main.dart';
import 'package:testproject/search_page.dart';
import 'package:testproject/world_page.dart';
import 'package:routemaster/routemaster.dart';
import 'package:testproject/route.dart';

const List<Tab> tabs = <Tab>[
  Tab(text: 'Zeroth'),
  Tab(text: 'First'),
  Tab(text: 'Second'),
];

class WorldPage extends ConsumerWidget {
  const WorldPage({Key? key}) : super(key: key);
  static const String path = "/WorldPage";

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final size = MediaQuery.of(context).size;
    final padding = MediaQuery.of(context).padding;
    var maxHeight = size.height - padding.top - padding.bottom;

    // ワールド説明サイズ
    final worldnameAreaHeight = maxHeight * (30 / 100);
    //タブバーサイズ
    final tabAreaHeight = maxHeight * (10 / 100);
    // コンテンツサイズ
    final contentAreaHeight = maxHeight * (50 / 100);

    return DefaultTabController(
      length: tabs.length,
      initialIndex: 0,
      // The Builder widget is used to have a different BuildContext to access
      // closest DefaultTabController.
      child: Builder(builder: (BuildContext context) {
        final TabController tabController = DefaultTabController.of(context)!;

        tabController.addListener(() {
          if (!tabController.indexIsChanging) {
            // Your code goes here.
            // To get index of current tab use tabController.index
          }
        });

        return Scaffold(
          appBar: AppBar(
            title: const Text('ワールドページ'),
            flexibleSpace: AppBar(
               title: Text('ワールド名'),
               
              ),
            bottom:  TabBar(
                  labelPadding: EdgeInsets.all(9),
                  isScrollable: true,
                  indicatorSize: TabBarIndicatorSize.label,
                  tabs: [
                    Tab(child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 80.0),
                      child: Icon(Icons.flight, size: 50),
                    )),
                    Tab(child: Icon(Icons.directions_transit, size: 50)),
                    Tab(child: Icon(Icons.directions_car, size: 50)),
                  ],
                ),
          ),
          body: TabBarView(
                children: [
                  Container(
                    color: Colors.brown,
                    child: Icon(Icons.flight, size: contentAreaHeight),
                  ),
                  Icon(Icons.directions_transit, size: contentAreaHeight),
                  Icon(Icons.directions_car, size: contentAreaHeight),
                ],
              ),
          );
      }),
    );
  }
}

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。