添加闪烁到按钮

时间:2017-05-11 20:10:15

标签: dart flutter

我想在选择一个单选按钮的时候引起用户对提交按钮的注意,我想知道是否还有什么可以实现这一点。我看过RaisedButton文档,但似乎没有任何闪烁或摇动按钮的属性。例如,下面的代码最初没有选择单选按钮,因此按钮显示为灰色,一旦在多个单选按钮之间做出选择,提交的RaisedButton onPressed属性值不再为null,而是替换为所需的操作;但是我还想要一种情况,如果选择了不同的单选按钮,有一些方法可以向提交按钮添加一些动作(闪烁/摇动按钮),但不能更改onPressed属性

new Radio<int>(
value: 1, 
groupValue: 0, 
onChanged: handleRadioValue
)

new RaisedButton(
child: const Text('SUBMIT')
onPressed: selected
)

handleRadioValue(){
selected = groupValue == 0 ? null : submitButton();
//change Raised button to attract attention}

1 个答案:

答案 0 :(得分:1)

您可以通过设置color RaisedButton的动画来吸引注意力。此示例通过将其颜色更改为当前主题RaisedButton并返回时,将单选按钮选择更改时引起注意disabledColor

screenshot

import 'dart:math';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  int _radioValue;

  @override initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    )..addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed)
        _controller.reverse();
    });
    super.initState();
  }

  void _handleRadioValue(int value) {
    // Don't animate the first time that the radio value is set
    if (_radioValue != null)
      _controller.forward();
    setState(() {
      _radioValue = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Radio<int>(
              value: 0,
              groupValue: _radioValue,
              onChanged: _handleRadioValue
            ),
            new Radio<int>(
              value: 1,
              groupValue: _radioValue,
              onChanged: _handleRadioValue
            ),
            new AnimatedBuilder(
              child: const Text('SUBMIT'),
              animation: _controller,
              builder: (BuildContext context, Widget child) {
                return new RaisedButton(
                  color: new ColorTween(
                    begin: theme.primaryColor,
                    end: theme.disabledColor,
                  ).animate(_controller).value,
                  colorBrightness: Brightness.dark,
                  child: child,
                  onPressed: _radioValue == null ?
                             null :
                             () => print('submit')
                );
              }
            )
          ],
        ),
      ),
    );
  }

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