The Animals are displayed in a Gridview So when i filter them out by species for example, i want the gridview to refresh when i click on a button from a different class.
the _printer(text) just returns a List <Animals>
the main method :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body:
Stack(
children: <Widget>[
Positioned(
child: _searchBar(),
),
_gridDisplay(""),))}
_gridDisplay(text){
return Container(
GridView.count(crossAxisCount: 2,
children: _printer(text).map((animals)=>InkWell())}
I fixed this by adding a globalkey
final homePageKey = GlobalKey<_HomePageState>();
and then calling it when i needed the change to occur
homePageKey.currentState?.reassemble();
Related
I need help. At the moment I'm trying to implement a background on my login page.
My problem is that I use a custom shape painter which shows my background.
To make my login page more dynamic I have added a function resizeToAvoidBottomInset: true, to move the textfield over the keyboard.
But now I have the problem that my background will be smaller if I click on my text field.
Here is my login page:
My code:
class _DebugPage extends State<DebugPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: customSubAppBar('Debug', context),
body: Stack(
children: [
//my custom shape painter
Expanded(
child: CustomeShapePainer(),
),
//my custom widgets
_body(context),
],
),
);
}
}
Is there a way to set the background on fix size?
I think you can try set widget CustomeShapePainer wrap Widget Stack. I don't remember exactly but in some projects I did
child: SingleChildScrollView(
child: Container(
color: AppConstants.bgColor,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: CustomPaint(
painter: CurvePainter(),
child: Stack
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.
I found some topics about calculating height in flutter, but noone of them answered my question. I am trying to calculate 100% of device height in flutter. I assume, I have to subtract from MediaQuery.of().size.height two things. First is AppBar height, so I calculated it by creating variable appBar and get property preferredSize.height. Second is the bar above appBar (which contains things like battery status, notifications etc.).
This is the simplest example:
#override
Widget build(BuildContext context) {
var appBar = AppBar(
title: Text(widget.title),
);
return Scaffold(
appBar: appBar,
body: Center(
child: Builder(
builder: (ctx) => Column(
children: <Widget>[
Container(
height: MediaQuery.of(ctx).size.height -
MediaQuery.of(ctx).padding.top -
appBar.preferredSize.height,
color: Colors.red,
)
],
),
),
),
);
}
This is my main Widget so I had to create context with Builder. However, it is not still equal to 100% of device height. It is 24px too much. I don't want to subtract 24px because It might be more/less on another device. What is wrong with this example?
You don't need to do anything special to the child of the Scaffold. Unless the child widget manages its own sizing, it will fill the entire remainder of the area inside of the Scaffold by default. In the case of Container, its behavior is to shrink wrap to the size of its child, but if it doesn't have a child, it will fill all available space. So you can just do this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Container(
color: Colors.red,
),
);
}
Depending on the child widget, you may need to manually configure a size, but most layout widgets either you won't need to worry about it or it just takes a bit of configuration. With Column, for example, if you set mainAxisSize: MainAxisSize.max and crossAxisAlignment: CrossAxisAlignment.stretch, then it will also automatically stretch to fill all available space. You can then make use of Expanded to size its children based on available space as well.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(color: Colors.red),
),
Expanded(
child: Container(color: Colors.green),
),
Expanded(
flex: 2,
child: Container(color: Colors.yellow),
),
],
),
);
}
However, on the seldom occasion you need the exact numbers of the space available, you don't usually want to use MediaQuery as that will get you the size of the entire screen, not just the available space, and you usually will have to perform additional calculations to boil it down to the size you are actually looking for (which usually leads to incorrect results, as you have discovered).
Instead, you can use a LayoutBuilder. A word of caution here, you don't want to abuse LayoutBuilder as it adds an additional layout step to its children, so having a lot of them in your code can easily slow down your app.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.biggest.width;
final height = constraints.biggest.height;
return Center(
child: Text('Width: $width, Height: $height'),
);
},
),
);
}
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
...
)
How can I make the Rows inside a vertical ListView, scrollable horizontally.
This is what my app looks like:
I want the user to be able to scroll the ListView both horizontally (to see the contents of the Row) and vertically to see new list items. This behavior is like how you would scroll a DataTable in Flutter:
Here is the build method (based on the Flutter project template):
#override
Widget build(BuildContext context) {
final List<String> rows = [
"This is a row with some very long text ... That goes on and on",
"This class is the configuration for the state.",
"case the title) provided by the parent (in this case the App widget) and",
"always marked \"final\"."
];
return Scaffold(
appBar: AppBar(title: Text("ListView")),
body: ListView(
padding: EdgeInsets.all(10),
children: <Widget>[
for (final String row in rows)
Row(
children: <Widget>[Text(row)],
)
],
),
);
}
Update: Wrapping the Text in Expanded doesn't work as it causes the text to wrap onto multiple lines. I want the text to remain on a single line.
Finally
After a deep search found this finally
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new SizedBox(
width: 1000.0,
child: new ListView.builder(
itemBuilder: (BuildContext context, int i) {
return new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: new List.generate(5, (int j) {
return new Text("$i,$j");
}),
);
},
),
),
),
);
}
Original source Vote up his answer too