Ajouter un clignotement au bouton

Question

J'aimerais attirer l'attention de l'utilisateur sur un bouton de soumission à chaque fois qu'un bouton radio est sélectionné et j'aimerais savoir s'il est possible d'implémenter cela dans Flutter. J'ai regardé la documentation de RaisedButton mais il ne semble pas y avoir de propriété pour faire clignoter ou secouer le bouton. Le code ci-dessous par exemple n'a initialement aucun bouton radio sélectionné donc le bouton est grisé, une fois qu'un choix est fait parmi plusieurs boutons radio, la valeur de la propriété submit RaisedButton onPressed n'est plus nulle mais remplacée par l'action requise ; cependant je veux aussi une situation où si un autre bouton radio est sélectionné, il y a un moyen d'ajouter un mouvement (bouton clignotant/secouant) au bouton submit mais pas de changer la propriété 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

Vous pouvez attirer l'attention en animant le color de la RaisedButton . Cet exemple attire l'attention sur la RaisedButton lorsque la sélection du bouton radio change en modifiant sa couleur en fonction du thème actuel. disabledColor et retour.

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