See the official installation guidelines at hidable/install
To start using Hidable
widget, we have to create a ScrollController
. inctance before.
final ScrollController scrollController = ScrollController();
As case of usage, we should have one scrollable widget (SingleChildScrollView, ListView etc) and one static located widget (AppBar
, BottomNavigationBar
, FloatingActionButton
and etc) which would be wrapped with Hidable
widget.
So, scrollController
which we created before must be given to each one (scrollable widget and static located hidable widget).
ListView.separated(
// General scroll controller which makes bridge between
// This ListView and Hidable widget.
controller: scrollController,
itemCount: colors.length,
itemBuilder: (_, i) => Container(
height: 50,
color: colors[i].withOpacity(.6),
),
separatorBuilder: (_, __) => const SizedBox(height: 10),
),
Hidable(
controller: scrollController,
enableOpacityAnimation: true, // optional, defaults to `true`.
child: BottomNavigationBar(...),
),
That is the common usage of hidable, and also you can find full code implmenetation of hidable at official example page.
Run this command:
With Flutter:
$ flutter pub add hidable
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
hidable: ^1.0.6
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:hidable/hidable.dart';
import 'package:flutter/material.dart';
import 'package:hidable/hidable.dart';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Example(),
);
}
}
class Example extends StatefulWidget {
const Example({Key? key}) : super(key: key);
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
final colorsPath = [Colors.green, Colors.orangeAccent, Colors.orange, Colors.red];
int index = 0;
// Create scroll controller that will be given to scrollable widget and hidable.
final ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
/// We've wrapped [AppBar] with [Hidable].
/// So, now, our [AppBar] supports scroll to hide feature.
appBar: Hidable(
controller: scrollController,
child: AppBar(
backgroundColor: colorsPath[index].withOpacity(.6),
title: const Text('Hidable'),
),
),
/// Scrollable widget of main widget
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 10),
child: ListView.separated(
/// scrollController should be given here, to scrollable widget.
/// and same controller must to be given hidable.
controller: scrollController,
itemCount: 15,
itemBuilder: (_, i) => _ListItem(),
separatorBuilder: (_, __) => const SizedBox(height: 10),
),
),
/// We've wrapped [BottomNavigationBar] with [Hidable].
/// So, now, our [BottomNavigationBar] supports scroll to hide feature.
bottomNavigationBar: Hidable(
controller: scrollController,
enableOpacityAnimation: true, // As default it's true
child: BottomNavigationBar(
currentIndex: index,
onTap: (i) => setState(() => index = i),
items: bottomBarItems(),
),
),
/// We've wrapped [FloatingActionButton] with [Hidable].
/// So, now, our [FloatingActionButton] supports scroll to hide feature.
floatingActionButton: Hidable(
controller: scrollController,
child: Align(
alignment: Alignment.centerRight,
child: FloatingActionButton(
child: const Icon(Icons.label),
backgroundColor: colorsPath[index].withOpacity(.8),
onPressed: () {
// Do something ...
},
),
),
),
);
}
List<BottomNavigationBarItem> bottomBarItems() {
return [
BottomNavigationBarItem(
label: 'Home',
icon: const Icon(Icons.home, color: Colors.white),
backgroundColor: colorsPath[0].withOpacity(.6),
),
BottomNavigationBarItem(
label: 'Favorites',
icon: const Icon(Icons.favorite, color: Colors.white),
backgroundColor: colorsPath[1].withOpacity(.6),
),
BottomNavigationBarItem(
label: 'Profile',
icon: const Icon(Icons.person, color: Colors.white),
backgroundColor: colorsPath[2].withOpacity(.6),
),
BottomNavigationBarItem(
label: 'Settings',
icon: const Icon(Icons.settings, color: Colors.white),
backgroundColor: colorsPath[3].withOpacity(.6),
),
];
}
}
class _ListItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListTile(
leading: Container(
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey.withOpacity(.4),
),
),
title: Align(
alignment: Alignment.topLeft,
child: Column(
children: [
Container(
height: 15,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.grey.withOpacity(.5),
),
),
const SizedBox(height: 10),
],
),
),
subtitle: Align(
alignment: Alignment.bottomLeft,
child: Column(
children: [
Container(
height: 10,
width: MediaQuery.of(context).size.width / 1.2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.grey.withOpacity(.3),
),
),
const SizedBox(height: 5),
Container(
height: 10,
width: MediaQuery.of(context).size.width / 1.2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.grey.withOpacity(.3),
),
),
],
),
),
);
}
}
Download details:
Author: insolite.io
Source: https://github.com/insolite-dev/hidable