ِAll I know about LinearProgressIndicator
is that the value property is 1.0 as the documentation:
A value of 0.0 means no progress and 1.0 means that progress is complete.
I have a page with a progress indicator where I want the user to set a value for the indicator. Edit 2 I want to change the range of default value from [0.0, 0.1 ... 1.0] to custom range for example user1 want the range to be from 0.0 to 100.0 other one want the range to be [0.0 to 10] so for that the progress indicator moving according to user value.
In other words:
how to change the default value property of LinearProgressIndicator
from 1.0 to custom value?
Edits 1 this is the page:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tst_app/add_dhker_page.dart';
import 'package:tst_app/masbha_page.dart';
import 'model/dhker.dart';
class DhkerPage extends StatefulWidget {
const DhkerPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_DhkerPageState createState() => _DhkerPageState();
}
class _DhkerPageState extends State<DhkerPage> {
List getLessons = [
Dhker(
title: "Title here",
indicatorValue: 0.00,
price: 20,
content:"contents here"),
];
List? lessons;
@override
void initState() {
setState(() {
lessons = getLessons;
});
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
ListTile makeListTile(Dhker lesson) => ListTile(
contentPadding:
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Container(
padding: const EdgeInsets.only(right: 12.0),
decoration: const BoxDecoration(
border: Border(
right: BorderSide(width: 1.0, color: Colors.white24))),
child: const Icon(Icons.autorenew, color: Colors.white),
),
title: Text(
lesson.title,
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 4,
child: LinearProgressIndicator(
backgroundColor: const Color.fromRGBO(209, 224, 224, 0.2),
value: lesson.indicatorValue,
valueColor: const AlwaysStoppedAnimation(Colors.green),
),
),
Flexible(
//flex: 1,
child: Text(
lesson.indicatorValue.toStringAsFixed(2),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
),
trailing: const Icon(Icons.keyboard_arrow_left,
color: Colors.white, size: 30.0),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MasbhaPage(dhker: lesson)));
},
);
Card makeCard(Dhker lesson) => Card(
elevation: 8.0,
margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration:
const BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: makeListTile(lesson),
),
);
final makeBody = ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: lessons!.length,
itemBuilder: (BuildContext context, int index) {
return makeCard(lessons![index]);
},
);
final topAppBar = AppBar(
elevation: 0.1,
backgroundColor: const Color.fromRGBO(58, 66, 86, 1.0),
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.list),
onPressed: () {},
)
],
);
final floatingAB = FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => AddDhkerPage(
(newDhkerTitle) {
setState(() {
getLessons.add(Dhker(
title: newDhkerTitle,
indicatorValue: 1,
price: 2,
content: 'content'));
print(newDhkerTitle);
});
Navigator.pop(context);
},
));
},
child: const Icon(Icons.add),
backgroundColor: const Color.fromRGBO(32, 45, 62, 1.0),
);
return Scaffold(
backgroundColor: const Color.fromRGBO(58, 66, 86, 1.0),
appBar: topAppBar,
body: makeBody,
//bottomNavigationBar: makeBottom,
floatingActionButton: floatingAB);
}
}
and...
class Dhker {
String title;
double indicatorValue;
int price;
String content;
Dhker({required this.title,
required this.indicatorValue,
required this.price,
required this.content});
}
CodePudding user response:
just use this TextFormField in your code in the Column below your LinearProgressIndicator's Row
TextFormField(
controller: _controller,
onChanged: (val)=> setState(() {
lesson.indicatorValue = double.parse(val);
}),
)
CodePudding user response:
I tried the pskink idea and it's worked fine.
declare the normalize()
method under _DhkerPageState
class like below
class _DhkerPageState extends State<DhkerPage> {
double normalize(double value, double min, double max) {
return ((value - min) / (max - min)).clamp(0, 1);
}
.
.
.
}
And then call it with Indicator's value, so your code will be something like below:
child: LinearProgressIndicator(
backgroundColor: const Color.fromRGBO(209, 224, 224, 0.2),
//value: lesson.indicatorValue,
value: normalize(lesson.indicatorValue, 0, 100),
valueColor: const AlwaysStoppedAnimation(Colors.green),
),
I think this should works fine as I test it with mine.