Home > other >  how to override the implementation of value property of LinearProgressIndicator with Flutter?
how to override the implementation of value property of LinearProgressIndicator with Flutter?

Time:11-20

ِ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.

  • Related