dart 如何在执行await操作时显示进度指示器- flutter

rvpgvaaj  于 2023-09-28  发布在  Flutter
关注(0)|答案(2)|浏览(123)

我试图在执行等待操作(需要时间完成的操作或功能)时显示进度指示器,当我说进度指示器时,我并不是指传统的循环进度指示器,它会在不显示任何百分比的情况下继续滚动
基本上我指的是百分比指标

jc3wubiy

jc3wubiy1#

The below code is working and showing the progress with percentage.
You can also run this here 

https://zapp.run/edit/flutter-z79y06bl79z0? 
split=50&lazy=false&entry=lib/main.dart&file=lib/main.dart

copy the above link and you can run the code through this link

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
bool compressing = false;
bool compressed = false;
double progress = 0.0;

Future<void> compressImages() async{
// If you have 5 images to compress;
for(int i = 1;i<=5;i++){
  // this is the compressing time
  await Future.delayed(Duration(seconds: 2));
  setState(() {
    //according to your number of images you can increase the value or percentage here
          progress += 0.2;
        });
   }
   }

@override
 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: compressed 
    ? Text("images compressed 🙂")
    : compressing 
    ? Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // here value can be 0.0 -> 1.0 
        CircularProgressIndicator(
          value: progress,
        ),
        Text("Precentage : ${progress*100}")
      ],
    )
    :Text("Want to Compress images"),
  ),
  floatingActionButton: ElevatedButton(
    onPressed: () async{
      setState(() {
                  compressing = true;
                });
      await compressImages();
      setState(() {
             compressed = true;     
                });
    },
    child: Text("Start Compress"),
  ),
);
}
}

It looks like this
[![Image how it looks][1]][1]
rta7y2nd

rta7y2nd2#

试试这个:

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? data;
  double value = 0.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
      (Duration timeStamp) async {
        const int time = 10;
        final Stream<int> timer = Stream<int>.periodic(
          const Duration(seconds: 1),
          (int i) {
            return time - 1;
          },
        );
        double inital = 0.0;
        timer.listen(
          (int event) {
            value = inital = inital + 0.1;
            setState(() {});
          },
        );
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: data == null
              ? LinearProgressIndicator(value: value)
              : Text(data ?? ""),
        ),
      ),
    );
  }
}

相关问题