为按钮添加闪烁

Question

我想在任何时候选择单选按钮时提醒用户注意提交按钮，我想知道是否有任何方法可以在 flutter 中实现它。我查看了 RaisedButton 文档，但似乎没有任何属性闪烁或摇动按钮。例如，下面的代码最初没有选择单选按钮，因此该按钮呈灰色，一旦在多个单选按钮中做出选择，提交 RaisedButton onPressed 属性值不再为空，而是替换为所需的操作；但是我也想要一种情况，如果选择了不同的单选按钮，有一些方法可以向提交按钮添加一些动作（flashing/shaking 按钮）但不更改 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}

Answer 1

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

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

为按钮添加闪烁

Add blinking to button

dart

flutter