Skip to content

Instantly share code, notes, and snippets.

@X-Wei

X-Wei/sliver_appbar_with_tabs.dart

Created July 29, 2018 11:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save X-Wei/ed1ce793482789c8e9632592b79458f7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save X-Wei/ed1ce793482789c8e9632592b79458f7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. X-Wei created this gist Jul 29, 2018.
    67 changes: 67 additions & 0 deletions sliver_appbar_with_tabs.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    // Sliver appbar with tabs.
    // Adapted from: https://stackoverflow.com/a/50858058

    import 'package:flutter/material.dart';

    void main() => runApp(MaterialApp(
    home: SilverAppBarWithTabBarScreen(),
    ));

    class SilverAppBarWithTabBarScreen extends StatefulWidget {
    @override
    _SilverAppBarWithTabBarState createState() => _SilverAppBarWithTabBarState();
    }

    class _SilverAppBarWithTabBarState extends State<SilverAppBarWithTabBarScreen>
    with SingleTickerProviderStateMixin {
    TabController controller;

    @override
    void initState() {
    super.initState();
    controller = TabController(
    length: 3,
    vsync: this,
    );
    }

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    body: CustomScrollView(
    slivers: <Widget>[
    SliverAppBar(
    title: Text("SilverAppBar title"),
    // pinned: true,
    snap: true,
    floating: true,
    expandedHeight: 160.0,
    // **Is it intended ?** flexibleSpace.title overlaps with tabs title.
    flexibleSpace: FlexibleSpaceBar(
    title: Text("FlexibleSpace title"),
    ),
    bottom: TabBar(
    tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
    ],
    controller: controller,
    ),
    ),
    // SliverList(
    SliverFillRemaining(
    child: TabBarView(
    controller: controller,
    children: <Widget>[
    Center(child: Text("Tab one")),
    Center(child: Text("Tab two")),
    Center(child: Text("Tab three")),
    ],
    ),
    ),
    ],
    ),
    );
    }
    }