I'm using Beamer for navigation in Flutter, and I want the top AppBar to not change (or do transition animations) when you navigate between screens. To do this, I'm using a nested Beamer. The build method for the top level screen looks like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('some title')),
body: Beamer(
key: _beamerKey,
routerDelegate: routerDelegate,
),
);
}
The result with this is that the AppBar is fixed at the top of the view port. If child screens have ScrollViews then just their content scrolls. I want the AppBar to scroll too to maximize screen real estate on small screens. I have tried the following:
return Scaffold(
body: ListView(
children: [
AppBar(title: const Text('some title')),
Beamer(
key: _beamerKey,
routerDelegate: routerDelegate,
),
],
));
and
return Scaffold(
body: CustomScrollView(slivers: <Widget>[
const SliverAppBar(
title: Text('data'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
((context, index) => Beamer(
key: _beamerKey,
routerDelegate: routerDelegate,
)),
childCount: 1)),
]),
);
In both cases I get an error _AssertionError ('package:flutter/src/widgets/overlay.dart': Failed assertion: line 728 pos 12: 'constraints.biggest.isFinite': is not true.)
What am I doing wrong?
Here's an example using a list of text fields in case it's not clear what it should look like (the app bar just scrolls along with everything else under it):
Related
I have the following:
IndexedStack(
index: index,
children: [
Scaffold(
body: ListView(),
),
Scaffold(
body: ListView(),
),
Scaffold(
body: ListView(),
),
],
)
However, on iOS, it seems that tapping the status bar to scroll to top scrolls all of these lists to the top.
Is there any way to make this behavior work correctly? I tried to add individual controller: _scrollController to each ListView, but that then didn't make the scroll to top work at all (tapping status bar did not scroll the list view).
Any way to make this work?
Update: Thanks to #vandad answer below, also with using key of PageStorageKey on each ListView/ScrollController/etc., it is possible to have the scroll to top functionality again on each individual view.
ListView(
key: PageStorageKey<String>("GIVE A KEY"),
...
)
Yes you can do that by setting the primary: false property of your other two ListView instances like this:
IndexedStack(
index: index,
children: [
Scaffold(
body: ListView(),
),
Scaffold(
body: ListView(
primary: false,
),
),
Scaffold(
body: ListView(
primary: false,
),
),
],
)
When I add a widget to a sliding_up_panel widget dynamically after the initial load, the panel's height does not increase, meaning that the bottom of the panel gets cut off and I get the A RenderFlex overflowed by 27 pixels on the bottom. error.
What can I do to ensure the panel updates its height in this case please?
To Reproduce
Add a widget to the panel dynamically via the condition ? widget : widget logic. For example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: Stack(
children: <Widget>[
Center(child: Text("This is the Widget behind the sliding panel"),),
SlidingUpPanel(
panel: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
myFirstVariable ? Text("This is a sliding Widget") : Container(),
mySecondVariable ? Text("This is another sliding Widget") : Container(),
],
),
)
)
],
)
);
}
Thanks so much!
the SlidingUpPanel widget doesn't adjust its height according to its children.
A solution to your problem would be add a SingleChildScrollView to your panel content and use the panelBuilder instead of the panel property.
The panelBuilder takes the burden of managing scrolling and sliding conflicts by providing you a controller that you can feed to your SingleChildScrollView, your code will change to be like the following :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: Stack(
children: <Widget>[
Center(child: Text("This is the Widget behind the sliding panel"),),
SlidingUpPanel(
panelBuilder:(sc) => SingleChildScrollView(
controller: sc,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
myFirstVariable ? Text("This is a sliding Widget") : Container(),
mySecondVariable ? Text("This is another sliding Widget") : Container(),
],
),
)
)
],
)
);
}
Like this, you won't have any overflow issues, and when the content of the panel overflows the SingleChildScrollView will become scrollable.
hope this helps:
use a controller,
You can control the height of the panel depending on the items on the list (0.0 to 1.0). Ensure to update the UI once you add a new item.
use a List
This will solve the renderOverflow you mentioned
/// just for the example
List<Widget> items = <Widget>[];
//adding items
addItem() {
items.add(Container(
constraints: BoxConstraints(maxHeight: 200, minHeight: 200),
color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
));
/// if you know in advance the height of the widgets been rendered: 200
/// if you know in advance the height of the panel: 500, or context.size.height / 2 (which would be 50% of screen) asume 600
///
/// increase panel height panel according to the number of items
///
_pc.panelPosition =
(items.length * 200) / 600 > 1.0 ? 1 : (items.length * 200) / 600;
/// Hey
/// SET State after adding the item
/// to refresh UI
}
Widget _scrollingList(ScrollController sc) {
return ListView.builder(
controller: sc,
itemCount: items.length,
itemBuilder: (context, index) {
return items[index];
},
);
}
PanelController _pc = new PanelController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
floatingActionButton: FloatingActionButton(
onPressed: addItem,
),
body: Stack(
children: <Widget>[
Center(
child: Text("This is the Widget behind the sliding panel"),
),
SlidingUpPanel(
controller: _pc,
panelBuilder: (ScrollController sc) => _scrollingList(sc),
),
],
));
Plugin has the methods: minHeight and maxHeight to do the work. I think is not posible change it dynamically without set that attributes.
My current screenstructure looks like this:
Scaffold(
body: Stack(
children: [
_buildOffstageNavigator(FeedScreen()),
_buildOffstageNavigator(Screen2()),
_buildOffstageNavigator(Screen3()),
],
),
bottomNavigationBar: buildBottomNavigationBar(),
)
the BottomNavigationBar is just a regular bar.
Each of those screens are wrapped with a OffStage() widget like this:
Widget _buildOffstageNavigator(Widget screenToBuild) {
return Offstage(
offstage: currentPage != screenToBuild,
child: TabNavigator(
navigatorKey: _navigatorKeys[screenToBuild],
screenToBuild: screenToBuild,
),
);
}
My intention with this was to ensure a BottomNavigationBar at all times.
However, there is one widget, that I want to push from FeedScreen() that I don't want the NavigationBar on, but the context makes it hard to hide this NavigationBar
This is the structure of the FeedScreen()
Scaffold(
appBar: buildAppBar(),
body: SingleChildScrollView(
key: PageStorageKey<String>("Feed"),
controller: _feedSC,
child: Column(
children: [
buildStoriesListView(),
buildPostsListView(posts)
],
),
),
)
So my question is: Is there a way to push this Widget "on top" of the stack and kind of ignore the context or do I just have to hide the bar in this case? How would you do that?
Thanks
You can wrap you Scaffold with a Navigator and use Navigator.of(context, rootNavigator: true).push(PageRouteBuilder(pageBuilder: (context, _, __) => Foo())); to push the Foo widget on top of everything.
I’m working on the concept that you can see on the screenshot below:
design concept
Note: the arrows are not the part of the UI, but were added to demonstrate the draggable functionality.
The screen has a SliverAppBar that displays location title, Sliver body that contains location description, and has a DraggableScrollableSheet (or a similar alternative).
When the location description is scrolled up, the title collapses.
When the DraggableScrollableSheet is scrolled up it expands to the full height of the screen.
I tried many times to put it together, but something is always off.
My last attempt was to add DraggableScrollableSheet as a ‘bottom sheet:’ in Scaffold. Since I have a BottomAppBar, it breaks the UI, and looks the following way:
current UI behavior
Scaffold
#override
Widget build(BuildContext context) {
return Scaffold(
body: body,
extendBody: true,
appBar: appBar,
bottomSheet: hasBottomSheet
? DraggableScrollableSheet(
builder:
(BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.blue[100],
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
);
},
)
: null,
backgroundColor: Colors.white,
floatingActionButtonLocation: fab_position,
floatingActionButton: hasActionButton ? ScannerFAB() : null,
bottomNavigationBar: AppBarsNav(hasNavButtons: hasNavButtons));
}
Scaffold body
class LocationPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ScaffoldWithNav(
hasBottomSheet: true,
body: CustomScrollView(
slivers: <Widget>[
SliverBar(
title: "Location",
hasBackground: true,
backgroundImagePath: 'assets/testImage.jpg'),
SliverToBoxAdapter(
child: Text("very long text "),
),
SliverPadding(
padding: EdgeInsets.only(bottom: 70),
),
],
),
);
}
}
BottomAppBar FAB
class ScannerFAB extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FloatingActionButton(
child: WebsafeSvg.asset('assets/qr-code.svg',
color: Colors.white, height: 24, width: 24),
);
}
}
The FAB jumps, the content is hidden.
When I set a fixed-sized container, the content comes back, but the FAB is still living its own life:)
current UI behavior2
If anyone has any idea how to solve this issue/those issues please share, I’ll be very grateful!
You can try to add another Scaffold on current body and put the DraggableScrollableSheet inside it. Then the DraggableScrollableSheet won't affect the FAB outside.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: body,
bottomSheet: ... // move DraggableScrollableSheet to here
),
...
floatingActionButton: ... // keep FAB here
...
)
You can use Stack into Body, for example:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children. [
SingleChildScrollView(),
DraggableScrollableSheet(),
]
),
...
floatingActionButton: ... // keep FAB here
...
)
I have used SilverAppBar but don't know how to add a drawer to it. I just want an app bar with a drawer that hides on scrolling
Note that the Scaffold takes care of all of the major behavior associated with Material design.
If you add the drawer field to your Scaffold, it will automatically add a hamburger menu icon to the left hand side of your SilverAppBar in flutter.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Drawer - Sliver AppBar'),
)],
),
drawer: Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Text(' I am Drawer'),
curve: SawTooth(12),
),
],
),
),
);
}