So... I have a togglebutton widget [1|2|3|4], but if another widget is checked, I need to disable some of those buttons (eg, if I'm connecting to a Tile instead of a Frob, I need to disable 2 & 4).
you can play with Visibility to hide or not the widgets you want
I found that the best way is to have the a function that returns ToggleButtons widget based on certain input parameters. So the function returns ToggleButton widgets whatever number of toggle buttons you want. In case you want 3 buttons, you would pass in a list of 3 bools, take that list and build the ToggleButtons widget with only 3 buttons...and so on. And/Or you can have a condition that builds different ToggleButtons widget based on a certain parameter:
ToggleButtons toggleButtons(
{required StateSetter setState,
required List<bool> isSelected,
required String nameOfButtons}) {
if (nameOfButtons == "shortList") {
// return ToggleButtons widget that only has 3 Toggle Buttons
return ToggleButtons(...);
} else {
// return ToggleButtons widget that only has 2 Toggle Buttons
return ToggleButtons(...);
}});
Visibility will simply hide the content of the toggle button but still allow a user to press that button. Also if you have an outline on your toggle buttons, the inside will just be blank but.
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,
),
],
);
}
}
How can I animate the change from a Text widget with a particular String to a new String which is dynamic, i.e., I don't know what it'll be beforehand ?
For example, let the widget be Text('a'). Later I want it to animate to Text('b'), maybe a after a button being clicked by a user.
Store the user input in a variable and display it in the Text widget. For example,
var input = value;
inside the widget you can use Text('$input') or directly Text(input) to display it
How to add bullets points in a TextField widget similar to the Notes app in IOS?
You can use Unicode code to achieve this. Add the following Unicode ( \u25EF ) to your TextField using TextEditingController. You may also need to change the position of the cursor when adding text to your TextEditingController. This depends on your requirement and you will understand when you test this.
TextEditingController _textController = new TextEditingController();
_textController.text = " \u25EF ";
Yes. of course you need a custom button or something to trigger this event like in the note of IOS.
You can create a custom keyboard with an extra button to add bullets or a floating deck with a button like the Note app. Or simply give a button on the screen.
You need to create a checkbox (or similar button) manually when user select it and add to left of textfield. You can define variable on a Row and initialize to Container. Something like that:
Widget widget = Container();
[...]
Row(
children: [
widget,
Expanded(child: TextField(...))
],
);
[...]
//this activate bullet point
void functionCheckBox(){
setState({
widget = Checkbox(value: value, onChanged: onChanged);
});
}
I dont know if it's the best solution or if exists a plugin that does something like that.
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;
});
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.