Я хочу создать StickyHeader, который может раскрываться и отображать SliverList при нажатии на него (например, ExpansionTile). Этот StickyHeader должен быть внутри TabBarView плавающего SliverAppBar.
Мой подход был следующий код:
import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
class Homepage extends StatefulWidget {
@override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
floating: true,
title: Text(
'Test',
),
bottom: TabBar(
tabs: [
Tab(text: "Call"),
Tab(text: "Message"),
],
),
),
];
},
body: TabBarView(
children: [
//HomepageShows(),
MyList(),
Container(),
],
),
),
);
}
}
class MyList extends StatefulWidget {
@override
_MyListState createState() => _MyListState();
}
class _MyListState extends State<MyList> {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverStickyHeader(
header: Container(color: Colors.red, child: Text('Header 1')),
sliver: SliverList(
delegate: SliverChildListDelegate(<Widget>[
Container(
height: 80, color: Colors.yellow, child: Text('Item 1')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 2')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 3')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 4')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 5')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 6')),
]),
),
),
SliverStickyHeader(
header: Container(color: Colors.red, child: Text('Header 2')),
sliver: SliverList(
delegate: SliverChildListDelegate(<Widget>[
Container(
height: 80, color: Colors.yellow, child: Text('Item 1')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 2')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 3')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 4')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 5')),
Container(
height: 80, color: Colors.yellow, child: Text('Item 6')),
]),
),
),
],
);
}
}
- Как я могу расширить SliverList при нажатии на заголовок?
- А как сделать плавающий SliverAppBar (в данный момент SliverAppBar появляется только при прокрутке вверх)?
Заранее спасибо.