Introduction
The hidable package allows you to easily hide or show widgets in Flutter, providing a way to toggle their visibility based on certain conditions.
Content
1.Add the hidable dependency:
Open your pubspec.yaml file and add the hidable dependency.
dependencies:
hidable: ^latest_version
Run flutter pub get to install the package.
2.Import the package:
Import the hidable package in your Dart file.
import 'package:hidable/hidable.dart';
3.Create a Hidable Widget:
Wrap the widget that you want to hide or show with the Hidable widget.
Hidable(
child: YourWidget(),
hidden: true, // Set to true to hide the widget, false to show it
),
4.Toggle Widget Visibility:
You can toggle the visibility of the widget by changing the hidden property dynamically.
bool isVisible = true;
// Toggle the visibility
setState(() {
isVisible = !isVisible;
});
Hidable(
child: YourWidget(),
hidden: !isVisible,
),
5.Run the app:
Run your Flutter app to see the hidden or shown widget based on the hidden property.
Sample Code
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(
centerTitle: true,
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),
),
),
],
),
),
);
}
}
Output
Conclusion
following these steps, you can easily implement a widget that can be hidden or shown in Flutter using the hidable package. This allows you to dynamically control the visibility of widgets based on your app’s requirements.
