import
'package:collapsible_sidebar/collapsible_sidebar.dart'
;
import
'package:flutter/material.dart'
;
void
main() => runApp(MyApp());
class
MyApp extends StatelessWidget {
const
MyApp({super.key});
@override
Widget build(BuildContext context) {
return
MaterialApp(
debugShowCheckedModeBanner:
false
,
title:
'Collapse Sidebar'
,
home: Scaffold(
body: SidebarPage(),
),
);
}
}
class
SidebarPage extends StatefulWidget {
@override
_SidebarPageState createState() => _SidebarPageState();
}
class
_SidebarPageState extends State<SidebarPage> {
late List<CollapsibleItem> _items;
late String _headline;
AssetImage _avatarImg = AssetImage(
'asset/gfg.png'
);
@override
void
initState() {
super.initState();
_items = _generateItems;
_headline = _items.firstWhere((item) => item.isSelected).text;
}
List<CollapsibleItem> get _generateItems {
return
[
CollapsibleItem(
text:
'GeeksforGeeks'
,
icon: Icons.school_outlined,
onPressed: () => setState(() => _headline =
'Geeks For Geeks'
),
isSelected:
true
,
),
CollapsibleItem(
text:
'Flutter'
,
icon: Icons.flutter_dash_outlined,
onPressed: () => setState(() => _headline =
'Flutter'
),
),
CollapsibleItem(
text:
'HTML'
,
icon: Icons.html_outlined,
onPressed: () => setState(() => _headline =
'HTML'
),
),
CollapsibleItem(
text:
'CSS'
,
icon: Icons.css_outlined,
onPressed: () => setState(() => _headline =
'CSS'
),
),
CollapsibleItem(
text:
'JavaScript'
,
icon: Icons.javascript_outlined,
onPressed: () => setState(() => _headline =
'JavaScript'
),
),
CollapsibleItem(
text:
'Home'
,
icon: Icons.home,
onPressed: () => setState(() => _headline =
'Home'
),
),
];
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return
SafeArea(
child: CollapsibleSidebar(
isCollapsed: MediaQuery.of(context).size.width <= 800,
items: _items,
avatarImg: _avatarImg,
title:
'MS471841'
,
onTitleTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(
'Yay! Flutter Collapsible Sidebar!'
)));
},
body: _body(size, context),
selectedIconBox: Colors.transparent,
unselectedTextColor: Colors.white,
unselectedIconColor: Colors.white,
backgroundColor: Color.fromARGB(255, 44, 129, 47),
selectedTextColor: Color.fromARGB(255, 65, 68, 255),
textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
titleStyle: TextStyle(
fontSize: 20,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
toggleTitleStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
sidebarBoxShadow: [
BoxShadow(
color: Color.fromARGB(255, 63, 181, 171),
blurRadius: 20,
spreadRadius: 0.01,
offset: Offset(3, 3),
),
BoxShadow(
color: Color.fromARGB(255, 77, 240, 83),
blurRadius: 50,
spreadRadius: 0.01,
offset: Offset(3, 3),
),
],
),
);
}
Widget _body(Size size, BuildContext context) {
return
Container(
height:
double
.infinity,
width:
double
.infinity,
color: Color.fromARGB(255, 255, 255, 255),
child: Center(
child: Text(
_headline,
style: Theme.of(context).textTheme.headline2,
overflow: TextOverflow.visible,
softWrap:
false
,
),
),
);
}
}