Flutter:Checkbox onChange does not update UI even tough the value changes - flutter

I'm building a To App in flutter and I want to change the boolean value of my individual todo by using a checkbox. While the value does change it is not reflected in the UI. Did I do something wrong?
In the beginning, I did not use a boolean to change the value of my Todo's completed property. I tried to change it with the checkbox but It did not seem to work and that's why I put a boolean instead.
import 'package:flutter/material.dart';
import './todo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To do app',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.green,
),
darkTheme: ThemeData(
brightness: Brightness.light,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List _myTodos = [
Todo(title: 'Take the dogs for a walk', completed: false, id: '1'),
Todo(title: 'Go out for a run', completed: true, id: '2')
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('To do app'),
centerTitle: true,
),
body: _myTodos.isEmpty
? Text(
'Press the button to add a new Todo',
style: TextStyle(fontSize: 20),
)
: Column(
children: _myTodos.map((todo) {
bool completed = todo.completed;
return Row(
children: <Widget>[
Checkbox(
value: completed,
onChanged: (bool newValue) {
print(completed);
setState(() {
completed = newValue;
print(completed);
});
},
),
Text(
todo.title,
style: TextStyle(fontSize: 16),
)
],
);
}).toList()),
floatingActionButton: FloatingActionButton(
onPressed: () {},
elevation: 8,
child: Icon(Icons.add),
),
);
}
}

Thank you all for your answers. I found out what was my issue. In my Todo class, I have set my completed value as final so of course, I wasn't able to change it when I pressed it.

Related

Flutter change Textstyle

I have a list and when I press the checkbox, I need the text to be stroken.
This is my method for checking the checkbox.
Any idea how I can implement the change of new textStyle here?
my method:
void toggleDone(TodoTask task, bool newValue) {
print("Status before processing");
task.status = newValue;
notifyListeners();
}
}
If u want to change sth depending on the state you can do it like that with tenary operator:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool change = false;
void _incrementCounter() {
setState(() {
_counter++;
change = !change;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: TextStyle(color: change ? Colors.red :Colors.black87),
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
In this example text color will change when u click the button. So you need to change this 'control variable' inside your function and widget will rebuild.
You can use TextDecoration.lineThrough property of TextStyle to put a line through or strike through text. There are several examples of how to use TextStyle in Flutter docs. The code shows how to change the TextStyle when Checkbox value is changed.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _value = false;
//void toggleDone(TodoTask task, bool newValue) {
void toggleDone(bool newValue) {
print("Status before processing");
_value = newValue;
//task.status = newValue;
//notifyListeners();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo Home Page"),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(
value: _value,
onChanged: (val) => setState(() => toggleDone(val))),
Text('TextDecoration LineThrough Demo',
style: _value
? TextStyle(
decoration: TextDecoration.lineThrough, fontSize: 25)
: TextStyle(fontSize: 25)),
],
),
),
);
}
}

Flutter How to force Dark mode on specific screens

I'm building a news app using flutter, the app has 2 theme modes already dark and light debends on phone settings and works really great, but I need on some screens on my app to be dark whatever such as videos section or video page ...etc
I googled this and all the results about the normal theming which I did already.
I don't think there's any code I can put here to help, but if there please let me know!
You can override the current theme at any time simply by placing the desired widget in a Theme class.
I don't know if you are using Scaffold or not, but let's say you are then all you would need to do is:
// declare theme data if you don't have it already
final ThemeData specialThemeData = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.yellow[700],
// and so on...
);
#override
Widget build(BuildContext context) {
// this the point of interest, return a Theme with desired Theme Data
return Theme(
data: specialThemeData,
child: Scaffold(
//...
It doesn't have to be Scaffold, it will work on any widegt.
Here is a fully functional example you can try out yourself:
import 'package:flutter/material.dart';
final ThemeData specialThemeData = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.yellow[700],
accentColor: Colors.orange[500],
textTheme: TextTheme(
headline1: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 24.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 18.0),
),
);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page default theme'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _goToSpecialPage() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MySpecialPage()
)
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your homepage, using default theme.',),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _goToSpecialPage,
tooltip: 'Go to special page',
child: Icon(Icons.navigate_next),
),
);
}
}
class MySpecialPage extends StatefulWidget {
MySpecialPage({Key key}) : super(key: key);
#override
_MySpecialPageState createState() => _MySpecialPageState();
}
class _MySpecialPageState extends State<MySpecialPage> {
void _backToHomePage(){
Navigator.pop(context);
}
#override
Widget build(BuildContext context) {
// this the point of interest, return a Theme with desired Theme Data
return Theme(
data: specialThemeData,
child: Scaffold(
appBar: AppBar(
title: Text('Special theme page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your special page that uses a different theme.',),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _backToHomePage,
tooltip: 'Go back to home page',
child: Icon(Icons.navigate_before),
),
),
);
}
}

How to force show text selection controls?

I need to show text selection controls on:
setState( () {
textController.selection = TextSelection(baseOffset: 0, extentOffset: textController.text.length);
});
But it did not appear on the screen. So, how to force flutter show the cut/copy/paste menu?
I hope it helps you.
You can use Selectable Widget.
https://www.youtube.com/watch?v=ZSU3ZXOs6hc&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=56
Second suggestion
When I test with below code, it works well.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "App",
theme: new ThemeData(primarySwatch: Colors.amber),
home: Test(),
);
}
}
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
TextEditingController controller = new TextEditingController(text: 'Kevin A');
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Title",
theme: new ThemeData(primarySwatch: Colors.amber),
home: Scaffold(
body: SafeArea(
child: TextField(
controller: controller,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
controller.selection = new TextSelection(
baseOffset: 0,
extentOffset: controller.text.length,
);
showMenu(
context: context,
// TODO: Position dynamically based on cursor or textfield
position: RelativeRect.fromLTRB(0.0, 300.0, 300.0, 0.0),
items: [
PopupMenuItem(
child: Row(
children: <Widget>[
// TODO: Dynamic items / handle click
PopupMenuItem(
child: Text(
"Paste",
style: Theme.of(context)
.textTheme
.body2
.copyWith(color: Colors.red),
),
),
PopupMenuItem(
child: Text("Select All"),
),
],
),
),
],
);
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
),
),
);
}
}

In flutter, can you set the appbar backgorund to change base on the value of a dropdown box?

my drop down box cycles through 5 strings
['blue','red','yellow','orange','grey']
I want my appbar title to be that dropdown box and for the value in the dropdown to determine the appbar color
DropDownWidget ddw = DropDownWidget();
var color = {
"blue": Colors.blue,
"red": Colors.red,
"yellow": Colors.yellow,
"orange": Colors.orange,
"grey": Colors.grey,
};
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: ddw,
backgroundColor: color[ddw],
),
}
The dropdown (ddw) shows up as the title, no problem.
I made a dictionary with those strings as the keys and the corresponding color as the value, but I am not able to use the string value of the dropdown to change the background.
Any suggestions?
You can copy paste run full code below
You can call setState in onChanged of DropdownButton
code snippet
appBar: AppBar(
backgroundColor: _appbarColor,
...
DropdownButton<Item>(
hint: Text("Select item"),
value: selectedColor,
onChanged: (Item Value) {
setState(() {
selectedColor = Value;
_appbarColor = selectedColor.color;
});
},
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class Item {
const Item(this.name, this.color);
final String name;
final Color color;
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Color _appbarColor = Colors.blue;
Item selectedColor;
List<Item> colorList = <Item>[
const Item('blue', Colors.blue),
const Item('red', Colors.red),
const Item('yellow', Colors.yellow),
];
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: _appbarColor,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButton<Item>(
hint: Text("Select item"),
value: selectedColor,
onChanged: (Item Value) {
setState(() {
selectedColor = Value;
_appbarColor = selectedColor.color;
});
},
items: colorList.map((Item item) {
return DropdownMenuItem<Item>(
value: item,
child: Row(
children: <Widget>[
Container(
height: 15,
width: 15,
color: item.color,
),
SizedBox(
width: 10,
),
Text(
item.name,
style: TextStyle(color: Colors.black),
),
],
),
);
}).toList()),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Using FontAwesomeIcons with value from custom class in Flutter

I'm trying to use fontawesome together with flutter. Depending on certain content of an Item I'd like to display a certain Icon from fontawesome.
Transaction(id: 1, title: 'lunch', amount: -23.10, type:'utensils'),
Transaction(id: 2, title: 'new shows', amount: -59.99, type:'tshirt'),
Transaction(id: 3, title: 'Falcon launch', amount: -62000000, type:'rocket')
so, I'd like to use the type as an indicator for my fontawesome icon.
When using FontAwesomeIcons.rocket, everything works quite well.
Column(children: <Widget>[
Card(
child: IconButton(
onPressed: null,
icon: new Icon(FontAwesomeIcons.rocket),
),
elevation: 0,
)
],),
since I'm using the map function I'm able to call the type itself without an issue like Text(tx.type). Is there a way to replace the static (in my case) rocket with the type from my transaction class? I'm trying to avoid if/switch cases at the moment just to get the basics going.
Any help very appreciated.
You can copy paste run full code below
You can use https://pub.dev/packages/icons_helper
just prefix rocket with fa.rocket
code snippet
Icon(getIconUsingPrefix(name: 'fa.rocket'),
color: Theme.of(context).backgroundColor, size: 60.0),
working demo
full code
import 'package:flutter/material.dart';
import 'package:icons_helper/icons_helper.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo + Icon Helper Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Map iconMap = {"a":'fa.rocket'};
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(getIconUsingPrefix(name: 'fa.fiveHundredPx'),
color: Theme.of(context).backgroundColor, size: 60.0),
Icon(getIconUsingPrefix(name: 'fa.rocket'),
color: Theme.of(context).backgroundColor, size: 60.0),
Icon(getIconUsingPrefix(name: iconMap["a"]),
color: Theme.of(context).backgroundColor, size: 60.0),
Text(
'There should be an icon above. It\'s neat, isn\'t?\n\nYou can also push the + button and increment this counter for fun:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}