i would like to know o can i change the value of a child widget in flutter if a certain condition is met, for example the color of an icon in the trailing
Here is some pseudo-code:
if(condition){
trailing Icon(Icons.favorite).color = Colors.red[500]
}else{
trailing = Icon(Icons.Favorite).color = Colors.blue[300]
}
Thank you.
you wanna something like this?
if yes, try this code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool colorIndex = true;
void _changeColor(val) {
setState(() {
this.colorIndex = val;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_changeColor(!colorIndex);
},
child: Icon(Icons.touch_app),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(50.0),
child: Card(
child: ListTile(
title: Text('Click FAB to change color'),
trailing: Icon(
Icons.favorite,
color: colorIndex ? Colors.red[500] : Colors.blue[300],
),
),
),
),
),
),
);
}
}
You can change anything under any condition you define. The most simple example is using setState to update a value that can be inspected during build. This value could change under any condition you like. Calling setState will trigger the UI to rebuild (calls the build method).
Here is a Widget. It displays the text "Hello, World!" in the center of the screen. The AppBar at the top has a leading IconButton Widget. When the IconButton is pressed, it will toggle the color of the "Hello, World!" text. It does this by updating the state of Widget and toggling the value of the blue variable. The condition is: if (blue) {} or "if blue is equal to true then change the color." During the build of the UI, the code inspects the value of blue and determines what TextStyle to apply to the "Hello, World!" text.
import 'package:flutter/material.dart';
class ColorChangeWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ColorChangeWidgetState();
}
class _ColorChangeWidgetState extends State<ColorChangeWidget> {
bool blue = false;
@override
Widget build(BuildContext context) {
TextStyle style = TextStyle(color: Colors.black);
if (blue) {
style = TextStyle(color: Colors.blue);
}
return Scaffold(
appBar: AppBar(
title: Text("Test"),
centerTitle: true,
leading: IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
blue = !blue;
});
},
),
),
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(8.0),
child: Text("Hello, World!", style: style)
)
);
}
}
