I've been having a problem while trying to personalize the FloatingActionButton, contained in a main page, from withing a nested route for a BottomNavigation. Right now what I have is this widget tree:
As you can see the app contains a Scaffold with a BottomNavigationBar and for each index from this BottomNavigation I have a new Navigator, from which I can navigate between nested routes. The problem is that the FAB configuration for each nested routed inside these Navigators is different, and therefore I needed to know which strategy should I use to change it's options, more specifically the icon and onPress method
Solution:
In the end I thought about a simple enough solution, don't know if it is the more adequate one, but it does work quite well.
Basically what I did was to create a provider in which I would have a list containing the FAB function for each route, being called accordingly with the one being displayed at the moment.
You can make your AppScreen a stateful widget, create an int _currentIndex = 0 in the state and after clicking on any of the BottomNavigationBarItems you can call setState changing the _currentIndex.
Then, in your build method you can do something like this:
Widget fabChild;
VoidCallback fabOnPressed;
if (_currentIndex == 0) {
fabChild = ...
fabOnPressed = ...
} else if (_currentIndex == 2) {
// (...)
}
return Scaffold(
floatingActionButton: FloatingActionButton(
child: fabChild,
onPressed: fabOnPressed,
),
);
Related
I have a widget with a list and a button with a tree dot icon in every row that shows and hides a panel in its own row. I only want one panel open in the list. When I click on a row button, I'd like to close the panels of the other rows list. All the buttons in the list are siblings. I'd like to send an event to the other rows' code to close the panels. Which is the correct manner of flutter?
I have tried NotificationListener but it does not work because the components to be notified are not their parents.
The question is if the correct thing to do is to use the event_listener library or to use streams. I'm new to flutter/dart and streams seem too complex to me. It's a very simple use case and in this entry
Flutter: Stream<Null> is allowed?
they say
*
Some peoples use streams as a flux of events instead of a value
changing over time, but the class isn't designed with this in mind.
They typically try to represent the following method as a stream:
So with simple events with 0 or 1 argument. event_listener or Streams?
This is the screen I'm working on. I want that when one yellow button panel opens the other one closes.
Your question is broad and it seems to be a design question, i.e. it doesn't have a right answer.
However, I don't think you should use Streams or EventListeners at all in this case, because you should not make components in the same layer communicate with each other. Components should only communicate with their parents and children, otherwise your code will increase in complexity really fast. That's even documented in flutter_bloc.
Other than that, if you don't lift state up, i.e. move the responsibility of triggering the removal of the other rows to a parent Widget, than you're fighting against Flutter instead of letting it help you.
It's easy to create a parent Widget, just wrap one Widget around it. What you want to do is hard, so why would try to communicate with sibling widgets instead of using what's Flutter designed to do?
This is a suggestion:
class _NewsSectionState extends State<NewsSection> {
Widget build(BuildContext context) {
return ListView.builder(
itemCount: newsInSection.length;
itemBuilder: (_, int index) => NewsTile(
title: Text('${newsInSection[index].title}')
onDismiss: () => onDismiss(index),
// I don't know how you set this up,
// but () => onDismiss(Index)
// should animate the dismiss of the Row with said index
),
);
}
}
class NewsRow extends StatefulWidget {
final void Function() onDismiss;
#override
State<NewsRow> _createState => _NewsRowState();
}
class _NewsRowState extends State<NewsRow> {
Widget build(BuildContext context) {
return Row(
children: [
// title
// home button
// fav button
// remove button
IconButton(
Icons.close,
onPressed: widget.onDismiss,
),
],
);
}
}
I am developing an app in flutter with few screen I want to add AppBar in home screen and want that appbar to be fixed in all screen, but in the dummy code which i have written the complete screen is getting replaced by that.
Below is the screen
HomeScreen - here i have created appbar
When I click on AddPolicy Button, i get that screen where right now i just have a text but the complete screen gets replaced as below, but I want the header appBar should be fixed. How can I achieve this.
Below is the code
homepage - https://github.com/lodha13/samkit/blob/main/lib/screens/home.dart
AddPolicy page - https://github.com/lodha13/samkit/blob/main/lib/screens/add_policy.dart
You have two opptions:
have a global widget for appbar and use it on each different page,
or
You can have one Scaffold in your main.dart and instead of generating a new one for each page, only change the body parameter using setState. for example:
// have as many widget as you want for each page
const body1 = Text("body1"); //just a simple example, you can change it to whatever you want.
const body2 = Text("body2");
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: handleBody(selectedIndex)
);
then you can have a function to handle bodies:
handleBody(int index){ // you can pass different input for body selection I have used an int for simplicity
if(index == 1){return body1;}
if(index ==2) {return body2;}
// and so on
}
now with changing the selectedIndex you can show different bodies. Personally, I prefer to have a list of widgets and select one of them based on selectedIndex.
I am building a wallpaper app and want to implement a feature of switching views, like switching from GridView to ListView on the press of an IconButton in FLutter
would look something like this:
The only way I could think of implementing this feature is by changing the crossAxisCount value in the GridView.count() method by hooking up a counter to the crossAxisCount property and controlling it through a function on click of an IconButton, this works but I have to Hot Reload my application every time the counter is incremented or decremented,
Any Suggestions or fix to this problem is welcomed.
You can simply use ternary operators and setState() to achieve what you want.
First, declare a boolean above your widget build. Then you can use ternary operators to change it from gridview to listview.
bool isGridView=true;
#override
Widget build(BuildContext context) {
Scaffold(
body: isGridView ? GridView.builder():ListView.builder(),
);
}
In your onPressed(), you can call setState():
setState(() {
isGridView=false;
});
Since i want this to be my layout i was trying to implement it with a showModalBottomSheet but the problem is that this widget only works on the button click as it is showing me error when i am trying to call the method as it is in the initState method. So then I started to work with bottomSheet value present in the scaffold but then the background is being displayed only upto the starting of the bottom sheet creating the distance between the model sheet and the background whereas I want it to overlap like in the image..How should I prepare this layout.
There is no such parameter as "bottomSheet" in Scaffold, there is one called bottomAppBar, which is used for making Bottom Bars like the one on the Youtube Android App. So this should help you make the basic structure.
Use a Stack widget to put widgets on top of each other, in first layer, add the image using the NetworkImage widget, then in the second layer, make a Column, like this:
#override
Widget build() => Scaffold(
body: _body(),
);
_body() => Stack(
children: <Widget>[
NetworkImage(your_url_here),
Column(
children: <Widget>[
_basicDetails(),
_guidePanel(),
]
),
]);
Then create 2 new methods after the _body method like this:
_body() => Stack(...);
_basicDetailsPage() => Container();
_guidePanel() => Container();
Create your layout in these 2 methods. Comment if you need more help :)
For additional help, please join the Facebook Group "Let's Flutter With Dart"
Say my App() contains some widget and to make the code look pretty, i have created classes for child widgets. Now these child widgets contain onTap functions which are supposed to replace a widget on App(), so how do i approach this type of problem ?
Some code of what you're doing would be useful or where you're trying to "replace a widget".
If by replace you mean show a different widget in the place of another then you just use a boolean to decide which one to show. These are the steps I would follow to implement this.
Make the widget in your App() stateful and create a member variable boolean called showingOriginalWidget = true;
In your child widget classes take in a Function in the parameter called onSwapWidget.
In your onTap function in your child widget call onSwapWidget()
In your App() supply the widget that's performing this action with your Function to call back to
See below
childWidget(onSwapWidget: (){
setState((){
// toggle the original widget state
showingOriginalWidget = !showOriginalWidget;
});
});
Where you're showing your widgets add a condition so that you show either one depending on the value.
example
...
child: showingOriginalWidget ? originalWidget() : swappedOutWidget()
...
That should do the trick.