So I have 3 tabs HEX , RGB, and HSL as StatefulWidget.
I have these 3 tabs in a Row in a StatelessWidget.
By default, HEX is selected, which I achieved successfully by initialising initState(). What I want to achieve now is that if I tap on any tab, the other two have to automatically go to a deselected state.
I used GestureDetector but it only changes the state of the tab I tapped on. I toggled the styles of all 3 tabs in the setState() function, but I guess the changes don't take place as the other 2 tabs are not built again, only the tab I tapped on is built again. By built I mean createState().
I am a beginner in Flutter, and I have spent a whole day finding solutions to this but to no avail.
I tried rebuilding the parent Row but I am not able to do so. I am trying to find a method by which I can rebuild widgets by key.
Any solution?
EDIT: The code for that section ->
key arrayKey = GlobalKey();
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//++++++++++++++++++++CHIPS++++++++++++++++++++++++++++++++++++++++++++++++
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
class chipMaker extends StatefulWidget {
chipMaker({required this.label}) : key = ObjectKey(label), chipSelect = false;
final String label;
final Key key;
bool chipSelect;
#override
_chipState createState() => _chipState();
}
class _chipState extends State<chipMaker> {
chipMaker get chip => super.widget;
//need to add setState();
#override
Widget build(BuildContext context) {
// TODO: implement build
return GestureDetector(
onTap: () {
//function
},
child: Container(
margin: EdgeInsets.only(left: 8),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
border: Border.all(
color: defaultColor,
width: 2,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(4)),
color: chip.chipSelect ? defaultColor : Colors.white,
),
child: Text(
chip.label,
style: TextStyle(
fontSize: 10,
height: 1.2,
color: chip.chipSelect ? Colors.white : defaultColor,
),
),
),
);
}
}
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//++++++++++++++++++++ARRAY++++++++++++++++++++++++++++++++++++++++++++++++
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
class chipArray extends StatelessWidget {
chipArray({Key? arrayKey,}) : super(key: arrayKey);
#override
Widget build(BuildContext context) {
// TODO: implement build
return Row(
children: [
chipMaker(label: 'HEX',),
chipMaker(label: 'RGB',),
chipMaker(label: 'HSL',),
],
);
}
}
Related
I need to make a search page. Made by means of TextField a field on clicking on which the page of search should open. Tell me how to implement clicking on the TextField and so that the back button appears on the left and the buttons disappear on the right?
code
TextFormField(
style: constants.Styles.textFieldTextStyleWhite,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 15, // HERE THE IMPORTANT PART
),
border: InputBorder.none,
prefixIcon: Align(
alignment: Alignment.centerLeft,
child: SvgPicture.asset(
constants.Assets.search,
width: 20,
height: 20,
))),
)
Normal state
After clicking on the line
Wrap everything into a StatefulWidget.
Then, when clicking the TextFormField, change the attributes of the StatefulWidget.
class YourPage extends StatefulWidget {
_YourPageState createState() => _YourPageState();
}
class _YourPageState extends State<YourPage> {
var myBool = false;
// Initialize your Row-buttons here
// ...
void changeRow(){
setState(() {
// Hide or show Row-buttons here.
myBool = true;
});
}
#override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
body: Row(children:[
myBool == true
? Icon( ...) // shows icon
: SizedBox.shrink(), // shows nothing
TextFormField( onTap: () => changeRow() ),
// other BUTTONs here
])
),
);
}
}
There are a few possibilities for an AppBar to show Text or Buttons.
Check these examples:
https://www.fluttercampus.com/tutorial/10/flutter-appbar/
What I Currently Have
What I want to achieve
The Code that I have now
Radio(
value: 2,
groupValue: val,
onChanged: (value) {
setState(() {
val = value;
});
},
activeColor: secondaryColor,)
It's not possible to customize that much the Radio button. The only color parameter for the button is fillColor. It will impact both the inner plain circle and the outer circle.
If you really want a custom look you'll need to build your own widget.
Here is a simple example that you can customize and improve. You could also try to start from the source code of the flutter Radio widget.
class CustomRadio extends StatefulWidget {
final int value;
final int groupValue;
final void Function(int) onChanged;
const CustomRadio({Key? key, required this.value, required this.groupValue, required this.onChanged})
: super(key: key);
#override
_CustomRadioState createState() => _CustomRadioState();
}
class _CustomRadioState extends State<CustomRadio> {
#override
Widget build(BuildContext context) {
bool selected = (widget.value == widget.groupValue);
return InkWell(
onTap: () => widget.onChanged(widget.value),
child: Container(
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(shape: BoxShape.circle, color: selected ? Colors.white : Colors.grey[200]),
child: Icon(
Icons.circle,
size: 30,
color: selected ? Colors.deepPurple : Colors.grey[200],
),
),
);
}
}
Result :
There is no way to provide the color of the outer circle in the material Radio class, what you can do is to create your own radio Button, either from scratch (Check the #Tanguy answer)or you copy the Radio class and change its design/behavior.
If you decide to copy the Radio class you need to inherit from the Radio so it can work with the rest of the Material design elements.
Here is a copy of it https://gist.github.com/karimkod/8f7c93da798670c8b6e9b85ff9fb5383
You can change the paint method of The _RadioPainter class to draw basically whatever you want. I have changed it in the gist to look purple.
I am trying to build a slider widget inside a dialog. I am using GetX, and a GetxController but the value of the slider or any other widget is not updating when I am trying to change it.
It only updates after I reopen the dialog. This is my code for the controller:
class SliderController extends GetxController {
static SliderController get to => Get.find();
var quality = 0.0.obs;
void setQuality(double quality) {
quality.value = quality;
update();
}
}
and my widget looks like this:
class SliderWidget extends StatelessWidget {
const SliderWidget ({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Opacity(
opacity: 0.8,
child: GetBuilder<SliderController>(
init: SliderController(),
builder: (ctrl) => Container(
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: const BorderRadius.all(Radius.circular(16)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.25),
spreadRadius: 2,
blurRadius: 2,
),
],
),
child: Stack(
children: <Widget>[
Positioned(
right: 0,
top: 0,
child: CustomCheckBox(
value: false,
shouldShowBorder: true,
borderColor: Colors.blueGrey,
checkedFillColor: Colors.blueGrey,
borderRadius: 8,
borderWidth: 2,
checkBoxSize: 22,
onChanged: (checked) {
if (checked) {
Get.defaultDialog(
textConfirm: "Save",
textCancel: "Cancel",
content: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Quality (${ctrl.quality})"),
Slider(
value: ctrl.quality.value,
min: 0,
max: 100,
divisions: 100,
onChanged: (double value) {
ctrl.setQuality(value);
},
)
],
),
);
}
},
),
),
]
)
)
)
);
}
}
So, the dialog opens, I try to drag the slider around but it doesn't change. Seems like the value is saved in the controller because if I close the dialog and open it again, the slider has the new values.
I don't know how to make the controller update the value inside the dialog's slider
I am seeing you are using the wrong combination. In this case you are using observables (.obs) in the controller, but using GetBuilder in the widget.
Keep in mind that GetX or Obx is used to observe the observables (Reactive State Management). GetBuilder is used for simple state management (Non-reactive/Non-observables).
So you can either change your variable type as normal dart types instead of Rx (.obs) in your controller like:
class SliderController extends GetxController {
static SliderController get to => Get.find();
double quality = 0.0;
void setQuality(double quality) {
this.quality = quality;
update();
}
}
Or you can use GetX or Obx in you widget. In that case no need to call update() on the controller.
I have a main widget screen contain two main widgets a Header (marked with red) and a list (marked with purple)
here is my code for that :
class ScreenClient extends StatefulWidget {
_ClientState createState() => _ClientState();
}
class _ClientState extends State<ScreenClient> {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClientHeader(), // this is my header widget red
Expanded(
child: ClientList(), // this is my list widget purple
),
],
);
}
}
the header widget has three options as you can see Tous Bloqué and ayant Retard , what I'm trying to achieve is pass the value of the clicked option to the list widget marked with purple (because those options are filters and the list elements should be shown based on the chosen option)
I have a hard time understanding state management packages and from what I understand Global Keys can do the trick but How ? .
here is my header widget code :
class ClientHeader extends StatefulWidget {
_HeaderClientState createState() => _HeaderClientState();
}
class _HeaderClientState extends State<ClientHeader> {
String nomSituation;
String option = "Tous";
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
GestureDetector(
child: Text(
"Tous",
style: TextStyle(
color: option == "Tous" ? Colors.white : Colors.grey[400],
),
),
onTap: () {
setState(() {
option = "Tous";
});
},
),
GestureDetector(
child: Text(
"Bloqué",
style: TextStyle(
color: option == "Bloqué" ? Colors.white : Colors.grey[400],
),
),
onTap: () {
setState(() {
option = "Bloqué";
//add send value to ClientList widet ?
});
},
),
GestureDetector(
child: Text(
"Ayant Retard",
style: TextStyle(
color:
option == "Ayant Retard" ? Colors.white : Colors.grey[400],
),
),
onTap: () {
setState(() {
option = "Ayant Retard";
});
},
),
],
),
);
}
}
I suggest you can watch 2 examples in this video Pragmatic State Management in Flutter (Google I/O'19)about state mangement. This video helped me a lot when I learn flutter in the begining. They explain how to control the StatefulWidget from the other one:
Make state global, controlled by another widget (from 5m30s)
Use Provider, which is a very popular solution in Flutter, to control share the value between 2 widgets (from 15m05s)
You you have more time, you can study more fancy state management method like Bloc, MobX (List of state management approaches) or even the advance version of Provider named riverpod just pushish few months ago, which try to resolve some cons when using Provider.
I'm trying to make a news section in my app. In this page that's gonna display the news, i want to be able to click anywhere on the page and get the news that is next in my list. So far no problem with that, but i wanted it to have a nice animation so i tried implementing AnimatedSwitcher, but i can't figure out why there is no animation showing.
I tried changing the hierarchy of my code. Putting the gesture detector inside the animated switcher and the other way around. Letting the main container outside or inside of it too. I tried an animation builder that would scale it just in case it wasnt obvious enough but nothing. Tried changing the duration too but that wasn't it.
class ShowNews extends StatefulWidget {
#override
_ShowNewsState createState() => _ShowNewsState();
}
class _ShowNewsState extends State<ShowNews> {
List<News> _news = [
News(title: 'OYÉ OYÉ', desc: 'bla bla bla bla bla'),
News(title: 'another one', desc: 'plus de bout d\'histoire'),
News(title: 'boum', desc: 'attention à l\'accident'),
News(title: 'Lorem ipsum', desc: 'Lorem ipsum in doloris'),
];
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
if (_currentIndex < _news.length - 1) {
_currentIndex++;
} else {
_currentIndex = 0;
}
});
},
child: Container(
height: 160,
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: AnimatedSwitcher(
duration: Duration(seconds: 5),
child: ColumnArticle(_news, _currentIndex),
),
),
);
}
}
Everything is working fine but the animation.
Edit: I tried adding a key to make it different but still no animation.
class ColumnArticle extends StatelessWidget {
final List<News> _news;
final int _currentIndex;
ColumnArticle(this._news, this._currentIndex);
#override
Widget build(BuildContext context) {
return Column(
key: ValueKey<int>(_currentIndex),
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
_news[_currentIndex].title,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
),
),
SizedBox(
height: 10.0,
),
Text(
_news[_currentIndex].desc,
style: TextStyle(
fontSize: 14.0,
),
),
],
);
}
}
That happens because the AnimatedSwitcher will add an animation anytime it is rebuilt with a different child reference. However, in your widget lifecycle, you are always using a ColumnArticle as a child, thus, not actually swapping any widget type, that's where the ValueKey comes in play.
You can use the index as the reference for the key, but make sure it actually changes, otherwise it won't work and you also need to pass it to your ColumnArticle base widget (super).
So, your ColumnArticle should look like this:
class ColumnArticle extends StatelessWidget {
final List<News> _news;
final int _currentIndex;
ColumnArticle(this._news, this._currentIndex) : super(key: ValueKey<int>(_currentIndex));
...
}
Passing the same type of widget with different attributes will not trigger an animation since they are the same widgets for the framework. It's also mentioned in the description.
If the "new" child is the same widget type and key as the "old" child,
but with different parameters, then AnimatedSwitcher will not do a
transition between them, since as far as the framework is concerned,
they are the same widget and the existing widget can be updated with
the new parameters. To force the transition to occur, set a Key on
each child widget that you wish to be considered unique (typically a
ValueKey on the widget data that distinguishes this child from the
others).
Here is the code from AnimatedSwitcher that checks whether to animate or not:
if (hasNewChild != hasOldChild ||
hasNewChild && !Widget.canUpdate(widget.child, _currentEntry.widgetChild)) {
// Child has changed, fade current entry out and add new entry.
_childNumber += 1;
_addEntryForNewChild(animate: true);
}
This is the static canUpdate method from the framework:
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
To solve this you can set individual keys to your News widgets based on their distinct attributes (eg. text, count, value). ValueKey<T> is just for that.
Column(
children: <Widget>[
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: Text(
'$_count',
// This key causes the AnimatedSwitcher to interpret this as a "new"
// child each time the count changes, so that it will begin its animation
// when the count changes.
key: ValueKey<int>(_count),
),
),
RaisedButton(
child: const Text('Increment'),
onPressed: () {
setState(() {
_count += 1;
});
},
),
])