11

我正在学习 Flutter allthought 我不知道它是否是正确的决定。我想以任何方式使用 Material Librery 中的 LinearProgressIndicator 组件，但我不知道如何使用它，我尝试了以下代码：

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,
  ),
   ));
  }
 }

但我总是得到这个错误

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.

如何解决这个问题，我很乐意做这个 Demo Flutter Progress Indicator Demo，但结果也一样 任何人都可以帮助我解决这个问题，或者可以告诉我我的代码有什么问题？问候

错误屏幕截图

4

4 回答 4

24

您可以AlwaysStoppedAnimation简单地使用 for valueColor,

LinearProgressIndicator(
    backgroundColor: Colors.red,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.amber,),
    value: 0.8,
),
于 2019-03-28T12:19:20.947 回答
19

您没有使用动画对象。

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,),

        )
    );
  }

}
于 2018-08-21T18:16:35.717 回答
4

尝试这个 ：

代替

value: _controller.value,

利用

value: _controller.value ?? 0.0,

你也可以使用我创建的包，它有动画：

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

于 2018-08-21T17:56:50.663 回答
0

这个问题的解决方案是将 Flutter Channel 从 beta 切换到 master 通道，然后上面的代码就可以工作了

于 2018-08-24T16:19:03.113 回答