web-dev-qa-db-fra.com

LinearProgressIndicator Flutter Utilisation

J'apprends Flutter allthought je ne sais pas si c'est la bonne décision ou non. De toute façon, je veux utiliser le composant LinearProgressIndicator de Material Librery mais je n'ai pas compris comment l'utiliser, j'ai essayé ce code:

import 'Dart:async';
import 'package:flutter/material.Dart';

void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
home: new MyApp(),
 ));
}

class MyApp extends StatefulWidget {
@override
MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text('Slider Demo'),
  ),
  body: new Container(
    color: Colors.blueAccent,
    padding: new EdgeInsets.all(32.0),
    child: new ProgressIndicatorDemo(),
  ),
);
}
}

class ProgressIndicatorDemo extends StatefulWidget {

@override
_ProgressIndicatorDemoState createState() =>
  new _ProgressIndicatorDemoState();
}

class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>
with SingleTickerProviderStateMixin {
AnimationController _controller;

@override
void initState() {
super.initState();
_controller = new AnimationController(
  duration: const Duration(milliseconds: 1500),
  vsync: this,
);
_playAnimation();
}

 Future<Null> _playAnimation() async {
  try {
  await _controller.repeat().orCancel;
  } on TickerCanceled {
  // the animation got canceled, probably because we were disposed
  }
  }

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

  @override
  Widget build(BuildContext context) {
  return _buildAnimation(context, null);
 }

 Widget _buildAnimation(BuildContext context, Widget child) {
 return new Center(
    child: new Container(
  color: Colors.redAccent.withOpacity(.1),
  child: new LinearProgressIndicator(
    value: _controller.value,
    backgroundColor: Colors.redAccent,
  ),
   ));
  }
 }

mais j'ai toujours cette erreur

I/flutter ( 3819): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY 
╞═══════════════════════════════════════════════════════════
I/flutter ( 3819): The following NoSuchMethodError was thrown building 
ProgressIndicatorDemo(dirty, state:
I/flutter ( 3819): _ProgressIndicatorDemoState#80400(ticker active)):
I/flutter ( 3819): The getter 'value' was called on null.
I/flutter ( 3819): Receiver: null
I/flutter ( 3819): Tried calling: value
I/flutter ( 3819):
I/flutter ( 3819): When the exception was thrown, this was the stack:
I/flutter ( 3819): #0      Object.noSuchMethod 
(Dart:core/runtime/libobject_patch.Dart:46:5)
I/flutter ( 3819): #1      _ProgressIndicatorDemoState.build 
(file:///E:/Flutter_work/animation_test/lib/main.Dart:67:26)
I/flutter ( 3819): #2      StatefulElement.build 
(package:flutter/src/widgets/framework.Dart:3730:27)
I/flutter ( 3819): #3      ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3642:15)
I/flutter ( 3819): #4      Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #5      StatefulElement.update 
(package:flutter/src/widgets/framework.Dart:3799:5)
I/flutter ( 3819): #6      Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #7      SingleChildRenderObjectElement.update 
(package:flutter/src/widgets/framework.Dart:4661:14)
I/flutter ( 3819): #8      Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #9      SingleChildRenderObjectElement.update 
(package:flutter/src/widgets/framework.Dart:4661:14)
I/flutter ( 3819): #10     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #11     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #12     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #13     StatelessElement.update 
(package:flutter/src/widgets/framework.Dart:3702:5)
I/flutter ( 3819): #14     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #15     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #16     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #17     ProxyElement.update 
(package:flutter/src/widgets/framework.Dart:3909:5)
I/flutter ( 3819): #18     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #19     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #20     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #21     ProxyElement.update 
(package:flutter/src/widgets/framework.Dart:3909:5)
I/flutter ( 3819): #22     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #23     RenderObjectElement.updateChildren 
(package:flutter/src/widgets/framework.Dart:4379:32)
I/flutter ( 3819): #24     MultiChildRenderObjectElement.update 
(package:flutter/src/widgets/framework.Dart:4769:17)
I/flutter ( 3819): #25     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #26     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #27     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #28     StatefulElement.update 
(package:flutter/src/widgets/framework.Dart:3799:5)
I/flutter ( 3819): #29     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #30     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #31     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #32     ProxyElement.update 
(package:flutter/src/widgets/framework.Dart:3909:5)
I/flutter ( 3819): #33     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #34     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #35     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #36     StatefulElement.update 
(package:flutter/src/widgets/framework.Dart:3799:5)
I/flutter ( 3819): #37     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #38     SingleChildRenderObjectElement.update 
(package:flutter/src/widgets/framework.Dart:4661:14)
I/flutter ( 3819): #39     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #40     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #41     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #42     StatelessElement.update 
(package:flutter/src/widgets/framework.Dart:3702:5)
I/flutter ( 3819): #43     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)   
I/flutter ( 3819): #44     SingleChildRenderObjectElement.update 
(package:flutter/src/widgets/framework.Dart:4661:14)
I/flutter ( 3819): #45     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #46     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #47     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #48     StatefulElement.update 
(package:flutter/src/widgets/framework.Dart:3799:5)
I/flutter ( 3819): #49     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #50     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #51     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #52     StatefulElement.update 
(package:flutter/src/widgets/framework.Dart:3799:5)
I/flutter ( 3819): #53     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #54     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #55     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #56     ProxyElement.update 
(package:flutter/src/widgets/framework.Dart:3909:5)
I/flutter ( 3819): #57     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #58     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #59     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #60     ProxyElement.update 
(package:flutter/src/widgets/framework.Dart:3909:5)
I/flutter ( 3819): #61     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #62     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #63     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)
I/flutter ( 3819): #64     StatefulElement.update 
(package:flutter/src/widgets/framework.Dart:3799:5)
I/flutter ( 3819): #65     Element.updateChild 
(package:flutter/src/widgets/framework.Dart:2699:15)
I/flutter ( 3819): #66     ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.Dart:3653:16)
I/flutter ( 3819): #67     Element.rebuild 
(package:flutter/src/widgets/framework.Dart:3495:5)  
I/flutter ( 3819): #68     BuildOwner.buildScope 
(package:flutter/src/widgets/framework.Dart:2242:33)
 Reloaded 0 of 391 libraries in 829ms.
 Lost connection to device.

Comment faire ça et je veux faire cette démo Flutter Progress Indicator Demo mais aussi le même résultat N'importe qui peut m'aider à travailler sur cet exemple ou me dire ce qui ne va pas dans mon code ?? Cordialement

Error Screen Shot

androiddartmaterial-designflutterflutter-animation
5
DoctorDoom

Vous n'utilisez pas d'objet d'animation.

import 'Dart:async';
import 'package:flutter/material.Dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Slider Demo'),
      ),
      body: new Container(
        color: Colors.blueAccent,
        padding: new EdgeInsets.all(32.0),
        child: new ProgressIndicatorDemo(),
      ),
    );
  }
}

class ProgressIndicatorDemo extends StatefulWidget {

  @override
  _ProgressIndicatorDemoState createState() =>
      new _ProgressIndicatorDemoState();
}

class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });
    controller.repeat();
  }


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

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Container(
          child:  LinearProgressIndicator( value:  animation.value,),

        )
    );
  }

}
3
Viren V Varasadiya

Essaye ça :

Au lieu de

value: _controller.value,

Utilisation

value: _controller.value ?? 0.0,

Vous pouvez également utiliser le package que j'ai créé, il a une animation:

https://pub.dartlang.org/packages/percent_indicator

2
diegoveloper

La solution à ce problème était Basculer le canal Flutter de la version bêta au canal maître puis le code ci-dessus a fonctionné

0
DoctorDoom