TabBar View with Custom Scroll Bar and SliverAppBar **I'm going insane I need other brains.

Brennan Altringer

unread,

Mar 12, 2019, 8:53:04 PM3/12/19

to Flutter Dev

I can't for the life of me figure this out. I have a SliverAppBar that collapses on scroll and I need the content under it to have a Tabview fill the remaining space based on the what is in the tab... Can someone help. I'm tearing my hair out and I'm already going bald. I need the tabs to scroll with the custom scroll view the AppBar is bound to. I got it so work where it was a separate scroll but if you scroll the image it would collapse and if you scrolled the items it would just scroll the items. It would be great to get them on the same controller.

Screen Shot 2019-03-12 at 5.50.28 PM.png

@override
  Widget build(BuildContext context) {
    // Use the Todo to create our UI
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: _headerSize,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text(''),
              background: Hero(
                tag: widget.item['code'],
                child: Image.network(
                  widget.item['image'],
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              Container(
                height: 50,
                child: DefaultTabController(
                  length: 2,
                  child: Scaffold(
                    appBar: TabBar(
                      tabs: const <Tab>[
                        Tab(icon: Text('Details')),
                        Tab(icon: Text('Signups'))
                      ],
                      labelColor: Colors.purple,
                      unselectedLabelColor: Colors.grey,
                      isScrollable: false,
                      indicatorColor: Colors.purple,
                    ),
                    body: TabBarView(
                      children: <Widget>[
                        _buildEvent(),
                        _displayPlayers(),
                      ],
                    ),
                  ),
                ),
              ),
            ]),
          ),
        ],
      ),
    );
  }

  Widget _buildEvent() {
    String eventType;
    if (widget.item['type'] == 'solo') {
      eventType = 'Solo Event';
    } else if (widget.item['type'] == 'team') {
      eventType = 'Teams Event';
    } else {
      eventType = 'Season';
    }

    final DateTime current = DateTime.parse(widget.item['time'].toString());
    final String month = getMonth('${current.month}');
    final int day = current.day;
    int hour;

    String minutes = '00';
    String afternoon;

    if (current.toLocal().hour > 12) {
      hour = current.toLocal().hour - 12;
      afternoon = 'PM';
    } else {
      hour = current.toLocal().hour;
      afternoon = 'AM';
    }

    if (current.toLocal().minute != 0) {
      minutes = '${current.toLocal().minute}';
    }

    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        children: <Widget>[
          ListTile(
            leading: CircleAvatar(
              radius: 15.0,
              backgroundImage: NetworkImage(_getGameIcon()),
              backgroundColor: Colors.transparent,
            ),
            title: Text(widget.item['game']),
            subtitle: Text(eventType),
          ),
          ListTile(
            leading: const Icon(Icons.calendar_today),
            title: Text('$month $day, $hour:$minutes $afternoon'),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(widget.item['d1']),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(widget.item['d2']),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(widget.item['d3']),
            ),
          ),
          _buttonText(),
        ],
      ),
    );
  }

Brennan Altringer

unread,

Mar 18, 2019, 1:09:49 PM3/18/19

to Flutter Dev

Nobody?

pooja patil

unread,

Jun 3, 2020, 2:22:32 AM6/3/20

to Flutter Development (flutter-dev)

Did you find the solution?

pprsolutions online

unread,

Jul 3, 2020, 7:45:29 AM7/3/20

to Flutter Development (flutter-dev)

Hi Did you find any solution for the same. I also stuck in that.

On Wednesday, March 13, 2019 at 6:23:04 AM UTC+5:30, Brennan Altringer wrote:

Reply all

Reply to author

Forward