I started creating a To-Do List App with Flutter.
And so far, I've added an AppBar, FloatingActionButton as adding button, List, TextField...
But I have a problem with the CheckBox IconButton. When its pressed it activates every member of the list instead only one.
Any solutions?
1 ListView.builder(
2 itemCount: todo.length,
3 itemBuilder: (context, index) {
4 return Card(
5 elevation: 5.0,
6 shape: RoundedRectangleBorder(
7 borderRadius: BorderRadius.circular(8),
8 ),
9 margin: EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
10 child: ListTile(
11 title: Text(
12 todo[index],
13 style: TextStyle(
14 color: (isPressed) ? Colors.grey[700] : Colors.black,
15 decoration: (isPressed) ? TextDecoration.lineThrough : TextDecoration.none
16 ),
17 ),
18 trailing:
21 IconButton(
22 icon: Icon(
23 Icons.check_box,
24 color: (isPressed) ? Colors.blueAccent : Colors.grey,
25 ),
26 onPressed: () {
27 setState(() {
28 isPressed = !isPressed;
29 });
30 },
31 )
At line 15. I added when the button is pressed a.k.a activated the member of the list to be "done" by having a line through and its colors from black to go grey. But, when I activate the button that happens to all members of the list.
As I see, isPressed is used for all of your listview items while each item should has its own isPressed value. You can create a list of booleans and assign each one of them to a list item, something like this:
List<bool> _radioList=[false,...]; //its length should be equal to todo.length
And then in your list you can use:
color: (_radioList[index]) ? Colors.grey[700] : Colors.black,
decoration: (_radioList[index]) ? TextDecoration.lineThrough : TextDecoration.none
..
color: (_radioList[index]) ? Colors.blueAccent : Colors.grey,
..
onPressed: () {
setState(() {
_radioList[index] = !_radioList[index];
});
Related
this error appears when taping drawer widget ,the page which appeares should appears when taping child of drawer and there is an image descripes what is happening ...............................................................
return Drawer(
child: Column(
children: [
Container(
color: Colors.yellow,
alignment: Alignment.topLeft,
padding:const EdgeInsets.all(20),
height: 120,
width: double.infinity,
child: Text(
'cook up ',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor),
),
),
const SizedBox(height:20),
BuildList('Meals', Icons.restaurant,(){
Navigator.of(context).push(MaterialPageRoute(builder: (_){return FilterScreen();}));
}),
BuildList('Filters ', Icons.settings,(){
Navigator.of(context).push(MaterialPageRoute(builder: (_){return TabsScreen();}));
}),
],
),
);
}
}
I am getting a String balance from the backend, and it is something like this 430000.
I would like to have an output like this 430,000.
How do I go about it?
Row(
children: [
Padding(
padding: const EdgeInsets.only(
left: 12,
),
child: Text(
"₦ ${user.availableBalance.toStringAsFixed(0)} ",
style: TextStyle(
color: Colors.white,
fontSize: 21.sp,
),
)),
],
),
The best way is to use Regex so define this on the top
class _HomeTabState extends State<HomeTab> {
//Regex
RegExp reg = RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'); //immport dar:core
RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
String Function(Match) mathFunc = (Match match) => '${match[1]},'; //match
...
//In your build
Widget build(BuildContext context) {
...
Row(
children: [
Padding(
padding: const EdgeInsets.only(
left: 12,
),
child: Text(
"₦ ${double.parse(user.availableBalance.toString()).toStringAsFixed(0)} " .replaceAllMapped(
reg, mathFunc),
style: TextStyle(
color: Colors.white,
fontSize: 21.sp,
),
)),
],
),
...
}
}
Then to use it just turn your balance into a double then to String in order to access the toStringAsFixed(0) like this
"${double.parse(balance.toString()).toStringAsFixed(0)}".replaceAllMapped(reg, mathFunc),
so for 430 -> would be 430 and 4300 -> would be 4,300 and 43000 -> would be 43,000
I would suggest using the intl package https://pub.dev/packages/intl
Example usage:
var f = NumberFormat("#,###.##");
print(f.format(123456789.4567));
This will result in the following output:
123,456,789.46
Note that , in the pattern specifies the grouping separator and ### specifies the group size to be 3. .##specifies rounding on two decimal points.
Check for additional documentation: https://api.flutter.dev/flutter/intl/NumberFormat-class.html
I am working on a drawing app. I can get a screenshot of a widget using RepaintBoundary but I need to update it with a button which is outside. In my case, I can clear the list of points with a FlatButton but my Container is not clearing because of RepaintBoundary I need to get a screenshot of my Container without RepaintBoundary or I should update my Container from outside they both works for me. Thanks.
return
SingleChildScrollView(//physics: NeverScrollableScrollPhysics(),
child: Column(
children: <Widget>[
RepaintBoundary(
key: _signKey,
child: new Container(
width: 100.0 * MediaQuery.of(context).devicePixelRatio ,
height: 150.0 * MediaQuery.of(context).devicePixelRatio,
color: Colors.black12,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox object = context.findRenderObject();
Offset _localPosition =
object.globalToLocal(details.globalPosition);
points = new List.from(points)
..add(_localPosition);
});
},
onPanEnd: (DragEndDetails details) => points.add(null),
child: new CustomPaint(
painter: new DrawingPainter(points: points),
size: Size.infinite,
),
),
),
),
Row(
children: <Widget>[
FlatButton( //Button to clear container
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
color: Colors.redAccent,
textColor: Colors.black,
onPressed: (){
setState(() {
points.clear();
});
},
child: Text('Sil'),
),
],
),
],
),
);
I have made total 14 screens in the application, you may see in the code whose link i have provided below. Two raised buttons i have created, one button named 'Wonders of world' on pressing will take it to second screen the other button named 'wonders of India' will take it to eleventh screen. Unfortunately The first button wonder of world is not visible. Why it is not showing?
This is the image on running the app, you can see only one raised button visible.
The link of the code
Just wrap your both button in Row Like
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
child: Text("Wonders of World"),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => SplashUI()));
},
color: Colors.red,
textColor: Colors.yellow,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
splashColor: Colors.grey,
),
RaisedButton(
child: Text("Wonders of India"),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => EleventhScreen()));
},
color: Colors.red,
textColor: Colors.yellow,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
splashColor: Colors.grey,
)
],
),
Im trying to build a screen, where i want a row widget inside a container, where the container has a boxDecoration property.How do to do that ?
I tried to put the container in a sized box, which has a boxDecoration property.Now, i want a row widget so that i can put an image and some text next to each other.But i do not have any idea to do that.
This is my code :
SizedBox(
width: 420.0,
height: 110.0,
child :
Container( //here i want a row widget so that i can put one image and some text
padding: EdgeInsets.only(bottom:10,top:30,left:20),
decoration: BoxDecoration(
border: Border.all(color: Color(0xffD4D4D4),width: 2.0)
),
child : Text("External LTE 4G universal modem antennas (2 or 4) (SMA) finger tighten only",textAlign: TextAlign.justify,style: TextStyle(fontSize: 15,fontWeight: FontWeight.normal),
)
),
),
You mean you want an Image and some text next to each other?
Try this.
Container(
padding: EdgeInsets.only(bottom:10,top:30,left:20),
decoration: BoxDecoration(
border: Border.all(color: Color(0xffD4D4D4),width: 2.0)
),
child: Row(
children: <Widget>[
Image.asset(), // <-- add the image path here, also don't forget to add the image to pubspec.yaml
Expanded(child: Text("External LTE 4G universal modem antennas (2 or 4) (SMA) finger tighten only",textAlign: TextAlign.justify,style: TextStyle(fontSize: 15,fontWeight: FontWeight.normal),))
],
)
),