Flurry Drawer In Flutter :
Screenshot :
main.dart
import 'package:flutter/material.dart';
import 'package:flurry_navigation/flurry_navigation.dart';
import 'package:flurry_navigation/flurry_menu.dart';
import 'home_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Decalre active screen var with the the default screen somewhere accesible to the contentScreen attributes
var activeScreen = homepage;
Widget build(BuildContext context) {
return new FlurryNavigation(
// The Icon data of the icon the BottomLeft
expandIcon: Icon(Icons.menu, size: 25),
// The size of the icon on the BottomLeft
iconSize: 50.0,
// The content of the screen
contentScreen: activeScreen,
menuScreen: new MenuScreen(
bgColor: Color.fromRGBO(121, 134, 203, 1),
menu: new Menu(
items: [
new MenuItem(
id:
'hom', //You can set this to whatever you want but dont duplicate it
icon:
'assets/hom.png', //Set this to the data for the icon of the button
isSelected: true,
selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
btnShape: BoxShape.rectangle),
new MenuItem(
id: 'sta',
icon: 'assets/sta.png',
isSelected: false,
selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
btnShape: BoxShape.rectangle),
new MenuItem(
id: 'doc',
icon: 'assets/doc.png',
isSelected: false,
selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
),
new MenuItem(
id: 'set',
icon: 'assets/set.png',
isSelected: false,
selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
),
],
),
onMenuItemSelected: (String itemId) {
if (itemId == 'hom') {
setState(() => activeScreen = homepage);
} else if (itemId == 'sta') {
setState(() => activeScreen = homepage);
} else if (itemId == 'doc') {
setState(() => activeScreen = homepage);
} else if (itemId == 'loc') {
setState(() => activeScreen = homepage);
} else if (itemId == 'set') {
setState(() => activeScreen = homepage);
}
},
),
);
}
}
flurry_menu.dart
import 'package:flutter/material.dart';
import 'flurry_navigation.dart';
final menuScreenKey = new GlobalKey(debugLabel: 'MenuScreen');
class MenuScreen extends StatefulWidget {
final Menu menu;
final Function(String) onMenuItemSelected;
final Color bgColor;
MenuScreen({
this.menu,
this.onMenuItemSelected,
this.bgColor,
}) : super(key: menuScreenKey);
@override
createState() {
return new CustomRadioState();
}
}
class CustomRadioState extends State<MenuScreen> {
List<RadioModel> sampleData = new List<RadioModel>();
@override
void initState() {
super.initState();
for (var i = 0; i < widget.menu.items.length; ++i) {
sampleData.add(new RadioModel(
widget.menu.items[i].isSelected,
widget.menu.items[i].icon,
widget.menu.items[i].id,
widget.menu.items[i].selectedBtnColor,
widget.menu.items[i].disabledBtnColor,
widget.menu.items[i].selectedShadowColor,
widget.menu.items[i].disabledShadowColor,
widget.menu.items[i].btnShape,
));
}
}
@override
Widget build(BuildContext context) {
return new FlurryNavigationMenuController(
builder: (BuildContext context, MenuController menuController) {
return new Scaffold(
backgroundColor: widget.bgColor,
body: FractionallySizedBox(
heightFactor: 0.69,
widthFactor: 0.3,
child: ListView.builder(
itemCount: sampleData.length,
itemBuilder: (BuildContext context, int index) {
return new InkWell(
splashColor: Colors.transparent,
onTap: () {
widget.onMenuItemSelected(sampleData[index].id);
setState(() {
sampleData.forEach((element) => element.isSelected = false);
sampleData[index].isSelected = true;
});
menuController.close();
},
child: new RadioItem(sampleData[index]),
);
},
),
),
);
});
}
}
class RadioItem extends StatelessWidget {
final RadioModel _item;
RadioItem(this._item);
@override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.all(15.0),
child: new Center(
child: new Container(
alignment: Alignment.center,
height: 60.0,
width: 60.0,
child: FractionallySizedBox(
heightFactor: 0.7,
widthFactor: 0.7,
child: Icon(Icons.home),
/*IconButton(
icon: Image.asset(_item.icon),
),*/
),
decoration: new BoxDecoration(
color: _item.isSelected
? _item.selectedBtnColor
: _item.disabledBtnColor,
border: new Border.all(width: 1.0, color: Colors.transparent),
shape: _item.btnShape,
boxShadow: <BoxShadow>[
BoxShadow(
color: _item.isSelected
? _item.selectedShadowColor
: _item.disabledShadowColor,
offset: Offset(0, 5.0),
blurRadius: 5.0,
spreadRadius: 1),
],
),
),
),
);
}
}
class MenuItem {
final bool isSelected;
final String icon;
final String id;
final Color selectedBtnColor;
Color disabledBtnColor;
Color selectedShadowColor;
Color disabledShadowColor;
BoxShape btnShape;
MenuItem(
{this.icon,
this.id,
this.isSelected,
this.selectedBtnColor,
this.disabledBtnColor = Colors.transparent,
this.selectedShadowColor = Colors.blueGrey,
this.disabledShadowColor = Colors.transparent,
this.btnShape = BoxShape.circle});
}
class RadioModel {
bool isSelected;
final String icon;
final String id;
final Color selectedBtnColor;
final Color disabledBtnColor;
final Color selectedShadowColor;
final Color disabledShadowColor;
final BoxShape btnShape;
RadioModel(
this.isSelected,
this.icon,
this.id,
this.selectedBtnColor,
this.disabledBtnColor,
this.selectedShadowColor,
this.disabledShadowColor,
this.btnShape);
}
class Menu {
final List<MenuItem> items;
Menu({
this.items,
});
}
flurry_navigation.dart
import 'package:flutter/material.dart';
class FlurryNavigation extends StatefulWidget {
final Widget menuScreen;
final Screen contentScreen;
final Icon expandIcon;
final double iconSize;
FlurryNavigation(
{this.menuScreen, this.contentScreen, this.expandIcon, this.iconSize});
@override
_FlurryNavigationState createState() => new _FlurryNavigationState();
}
class _FlurryNavigationState extends State<FlurryNavigation>
with TickerProviderStateMixin {
MenuController menuController;
Curve scaleDownCurve = new Interval(0.0, 1.0, curve: Curves.linear);
Curve scaleUpCurve = new Interval(0.0, 1.0, curve: Curves.linear);
Curve slideOutCurve = new Interval(0.0, 1.0, curve: Curves.elasticOut);
Curve slideInCurve = new Interval(0.0, 1.0, curve: Curves.ease);
@override
void initState() {
super.initState();
menuController = new MenuController(
vsync: this,
)..addListener(() => setState(() {}));
}
@override
void dispose() {
menuController.dispose();
super.dispose();
}
createContentDisplay() {
return zoomAndSlideContent(
new Container(
child: new Scaffold(
body: Column(children: <Widget>[
Expanded(
child: widget.contentScreen.contentBuilder(context),
),
Row(
children: <Widget>[
IconButton(
icon: widget.expandIcon,
onPressed: () {
menuController.toggle();
},
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(0),
iconSize: widget.iconSize,
)
],
),
])),
),
);
}
zoomAndSlideContent(Widget content) {
//slidePercent is not used right now but it may be used in future versions
var /*slidePercent, */scalePercent;
switch (menuController.state) {
case MenuState.closed:
//slidePercent = 0.0;
scalePercent = 0.0;
break;
case MenuState.open:
//slidePercent = 1.0;
scalePercent = 1.0;
break;
case MenuState.opening:
//slidePercent = slideOutCurve.transform(menuController.percentOpen);
scalePercent = scaleDownCurve.transform(menuController.percentOpen);
break;
case MenuState.closing:
//slidePercent = slideInCurve.transform(menuController.percentOpen);
scalePercent = scaleUpCurve.transform(menuController.percentOpen);
break;
}
var contentScale;
double cornerRadius = 0;
return OrientationBuilder(builder: (context, orientation) {
contentScale = 1.0 - (0.3 * scalePercent);
cornerRadius = 260 * menuController.percentOpen;
return new Transform(
transform: new Matrix4.translationValues(0.0, 0.0, 0.0)
..scale(contentScale, contentScale),
alignment: orientation == Orientation.portrait
? Alignment.topRight
: Alignment.topRight,
child: new ClipRRect(
borderRadius: new BorderRadius.only(
bottomLeft: Radius.circular(cornerRadius)),
child: content),
);
});
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
widget.menuScreen,
createContentDisplay(),
],
);
}
}
class FlurryNavigationMenuController extends StatefulWidget {
final FlurryNavigationBuilder builder;
FlurryNavigationMenuController({
this.builder,
});
@override
FlurryNavigationMenuControllerState createState() {
return new FlurryNavigationMenuControllerState();
}
}
class FlurryNavigationMenuControllerState
extends State<FlurryNavigationMenuController> {
MenuController menuController;
@override
void initState() {
super.initState();
menuController = getMenuController(context);
menuController.addListener(_onMenuControllerChange);
}
@override
void dispose() {
menuController.removeListener(_onMenuControllerChange);
super.dispose();
}
getMenuController(BuildContext context) {
final navigationState =
context.ancestorStateOfType(new TypeMatcher<_FlurryNavigationState>())
as _FlurryNavigationState;
return navigationState.menuController;
}
_onMenuControllerChange() {
setState(() {});
}
@override
Widget build(BuildContext context) {
return widget.builder(context, getMenuController(context));
}
}
typedef Widget FlurryNavigationBuilder(
BuildContext context, MenuController menuController);
class Screen {
final WidgetBuilder contentBuilder;
Screen({
this.contentBuilder,
});
}
class MenuController extends ChangeNotifier {
final TickerProvider vsync;
final AnimationController _animationController;
MenuState state = MenuState.closed;
MenuController({
this.vsync,
}) : _animationController = new AnimationController(vsync: vsync) {
_animationController
..duration = const Duration(milliseconds: 300)
..addListener(() {
notifyListeners();
})
..addStatusListener((AnimationStatus status) {
switch (status) {
case AnimationStatus.forward:
state = MenuState.opening;
break;
case AnimationStatus.reverse:
state = MenuState.closing;
break;
case AnimationStatus.completed:
state = MenuState.open;
break;
case AnimationStatus.dismissed:
state = MenuState.closed;
break;
}
notifyListeners();
});
}
@override
dispose() {
_animationController.dispose();
super.dispose();
}
get percentOpen {
return _animationController.value;
}
open() {
_animationController.forward();
}
close() {
_animationController.reverse();
}
toggle() {
if (state == MenuState.open) {
close();
} else if (state == MenuState.closed) {
open();
}
}
}
enum MenuState {
closed,
opening,
open,
closing,
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:flurry_navigation/flurry_navigation.dart';
final homepage = new Screen(
contentBuilder: (BuildContext context) {
return new Center(
child: new Container(
height:100.0,
child: new Padding(
padding: const EdgeInsets.all(25.0),
child: new Column(
children: [
new Expanded(
child: new Center(
child: new Text('Flutter Tutorial')
)
)
],
),
),
),
);
}
);
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
