¿Ocultar la barra de aplicaciones en Scroll Flutter?

Tenemos el resultado a esta escollo, al menos eso esperamos. Si sigues con inquietudes puedes dejar un comentario, que con gusto te ayudaremos

Solución:

Si lo entendí correctamente, el siguiente código debería hacer que la barra de la aplicación se oculte al desplazarse mientras TabBar permanece visible:

new Scaffold(
  body: new NestedScrollView(
    controller: _scrollViewController,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) 
      return [
        new SliverAppBar(
          title: new Text(widget.title),
          pinned: true,
          floating: true,
          forceElevated: innerBoxIsScrolled,
          bottom: new TabBar(
            tabs: [
              new Tab(text: "STATISTICS"),
              new Tab(text: "HISTORY"),
            ],
            controller: _tabController,
          ),
        ),
      ];
    ,
    body: new TabBarView(
      children: [
        new StatisticsPage(),
        new HistoryPage(),
      ],
      controller: _tabController,
    ),
  ),
);

Ejemplo procedente de este post.

Le sugiero que tenga que pasar por SliverAppBar y SliverList para lograr su diseño. El siguiente código puede ayudarlo a comprender eso.

import 'package:flutter/material.dart';

void main() 
  runApp(new MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  


class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State 
  @override
  Widget build(BuildContext context) 

    List buildTextViews(int count) 
      List strings = List();
      for (int i = 0; i < count; i++) 
        strings.add(new Padding(padding: new EdgeInsets.all(16.0),
            child: new Text("Item number " + i.toString(),
                style: new TextStyle(fontSize: 20.0))));
      
      return strings;
    

    return Scaffold(
        body: new CustomScrollView(slivers: [
          const SliverAppBar(
            title: const Text('Sliver App Bar'),
          ),
          new SliverList(
              delegate: new SliverChildListDelegate(buildTextViews(50)))
        ])
    );
  

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State
    with SingleTickerProviderStateMixin 
  bool _showAppbar = true;
  ScrollController _scrollBottomBarController = new ScrollController();
  bool isScrollingDown = false;
  bool _show = true;
  double bottomBarHeight = 75;
  double _bottomBarOffset = 0;

  @override
  void initState() 
    super.initState();
    myScroll();    
  

  @override
  void dispose() 
    super.dispose();
    _scrollBottomBarController.removeListener(() );
    super.dispose();
  

  void showBottomBar() 
    setState(() 
      _show = true;
    );
  

  void hideBottomBar() 
    setState(() 
      _show = false;
    );
  

  void myScroll() async 
    _scrollBottomBarController.addListener(() 
      if (_scrollBottomBarController.position.userScrollDirection ==
          ScrollDirection.reverse) 
        if (!isScrollingDown) 
          isScrollingDown = true;
          _showAppbar = false;
          hideBottomBar();
        
      
      if (_scrollBottomBarController.position.userScrollDirection ==
          ScrollDirection.forward) 
        if (isScrollingDown) 
          isScrollingDown = false;
          _showAppbar = true;
          showBottomBar();
        
      
    );
  

  Widget containterContent()
    return Container(
      height: 50.0,
      color: Colors.cyanAccent,
      margin: EdgeInsets.all(8.0),
      width: MediaQuery.of(context).size.width - 100,
      child: Center(child: Text('Item 1',
        style: TextStyle(
          fontSize: 14.0,
        ),)),
    );
  

  Widget body() 
    return ListView(
      controller: _scrollBottomBarController,
      children: [
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),

      ],
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: _showAppbar
          ? AppBar(
        title: Text('My Tasks'),
      )
          : PreferredSize(
        child: Container(),
        preferredSize: Size(0.0, 0.0),
      ),
      bottomNavigationBar: Container(
        height: bottomBarHeight,
        width: MediaQuery.of(context).size.width,
        child: _show
            ?BottomNavigationBar(
          currentIndex: 0, // this will be set when a new tab is tapped
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.home),
              title: new Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.mail),
              title: new Text('Messages'),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.person), title: Text('Profile'))
          ],
        )
            : Container(
          color: Colors.white,
          width: MediaQuery.of(context).size.width,
        ),
      ),

      body: body(
      ),

    );
  

Tienes la opción de secundar nuestra misión añadiendo un comentario o valorándolo te estamos eternamente agradecidos.

---

---

Utiliza Nuestro Buscador