я использую этот 'код'
то, что я хочу, это то же самое, но с другой стороны. Меню навигации должно быть справа, а не слева
что я пробовал -
class ZoomScaffold extends StatefulWidget {
final Widget menuScreen;
final Layout contentScreen;
ZoomScaffold({
this.menuScreen,
this.contentScreen,
});
@override
_ZoomScaffoldState createState() => new _ZoomScaffoldState();
}
class _ZoomScaffoldState extends State<ZoomScaffold>
with TickerProviderStateMixin {
Curve scaleDownCurve = new Interval(0.0, 0.3, curve: Curves.easeOut);
Curve scaleUpCurve = new Interval(0.0, 1.0, curve: Curves.easeOut);
Curve slideOutCurve = new Interval(0.0, 1.0, curve: Curves.easeOut);
Curve slideInCurve = new Interval(0.0, 1.0, curve: Curves.easeOut);
int _currentIndex = 0;
PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
createContentDisplay() {
return zoomAndSlideContent(new Container(
child: new Scaffold(
// backgroundColor: Colors.transparent,
appBar: new AppBar(
// backgroundColor: Colors.grey[200],
elevation: 2.0,
title: new Text('header'),
centerTitle: true,
actions:<Widget>[
new IconButton(
onPressed: () {
Provider.of<MenuController>(context, listen: true).toggle();
},
icon: Icon(
Icons.sort,
// color: Colors.grey,
),
)],),
body: SizedBox.expand(
child: PageView(
controller: _pageController,
onPageChanged: (index) {
setState(() => _currentIndex = index);
},
children: <Widget>[
Container(
color: Colors.white,
),
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
),
),
bottomNavigationBar: BottomNavyBar(
selectedIndex: _currentIndex,
onItemSelected: (index) {
setState(() => _currentIndex = index);
_pageController.jumpToPage(index);
},
items: <BottomNavyBarItem>[
BottomNavyBarItem(
title: Text('Home'),
icon: Icon(Icons.home),
activeColor: primaryBlack,
),
BottomNavyBarItem(
title: Text('Item One'),
icon: Icon(Icons.apps),
activeColor: primaryBlack,
),
BottomNavyBarItem(
title: Text('Profile'),
icon: Icon(Icons.person_outline),
activeColor: primaryBlack,
),
BottomNavyBarItem(
title: Text('Settting'),
icon: Icon(Icons.settings),
activeColor: primaryBlack,
),
],
),
),
));
}
zoomAndSlideContent(Widget content) {
var slidePercent, scalePercent;
switch (Provider.of<MenuController>(context, listen: true).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(
Provider.of<MenuController>(context, listen: true).percentOpen);
scalePercent = scaleDownCurve.transform(
Provider.of<MenuController>(context, listen: true).percentOpen);
break;
case MenuState.closing:
slidePercent = slideInCurve.transform(
Provider.of<MenuController>(context, listen: true).percentOpen);
scalePercent = scaleUpCurve.transform(
Provider.of<MenuController>(context, listen: true).percentOpen);
break;
}
final slideAmount = 275.0 * slidePercent;
final contentScale = 1.0 - (0.2 * scalePercent);
final cornerRadius =
16.0 * Provider.of<MenuController>(context, listen: true).percentOpen;
return new Transform(
transform: new Matrix4.translationValues(0.0, 0.0, slideAmount)
..scale(contentScale, contentScale),
alignment: Alignment.centerLeft,
child: new Container(
decoration: new BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.black12,
offset: const Offset(0.0, 5.0),
blurRadius: 15.0,
spreadRadius: 10.0,
),
],
),
child: new ClipRRect(
borderRadius: new BorderRadius.circular(cornerRadius),
child: content),
),
);
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
child: Scaffold(
body: widget.menuScreen,
),
),
createContentDisplay(),
],
);
}
}
class ZoomScaffoldMenuController extends StatefulWidget {
final ZoomScaffoldBuilder builder;
ZoomScaffoldMenuController({
this.builder,
});
@override
ZoomScaffoldMenuControllerState createState() {
return new ZoomScaffoldMenuControllerState();
}
}
class ZoomScaffoldMenuControllerState
extends State<ZoomScaffoldMenuController> {
@override
Widget build(BuildContext context) {
return widget.builder(
context, Provider.of<MenuController>(context, listen: true));
}
}
typedef Widget ZoomScaffoldBuilder(
BuildContext context, MenuController menuController);
class Layout {
final WidgetBuilder contentBuilder;
Layout({
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: 250)
..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,
}
результат - снимок экрана результата
главный экран все еще виден. Я хочу, чтобы основной экран был за пределами экрана, чтобы мы могли видеть немного запутанное меню, какие изменения я должен внести для достижения моего результата