高架按钮和轮廓按钮之间的动画

Question

我想要一个按钮在

ElevatedButton

和

OutlinedButton

之间切换。我剪下了这段代码：

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _highlighted = false;

  void _onPressed() {
    setState(() {
      _highlighted = !_highlighted;
    });
  }

  @override
  Widget build(BuildContext context) {
    const buttonContent = Text('Button');
    return Scaffold(
      body: Center(
        child: _highlighted
            ? ElevatedButton(
                onPressed: _onPressed,
                child: buttonContent,
              )
            : OutlinedButton(
                onPressed: _onPressed,
                child: buttonContent,
              ),
      ),
    );
  }
}

这是它的样子：

我希望过渡“顺利”。当按钮从一种样式变为另一种样式时，它希望它具有动画效果。怎么做？

Answer 1

我设法使用

AnimatedTheme

获得了预期的效果。

查看以下代码片段中的小部件

AnimatedButton

：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: OutlinedButton.styleFrom(
            foregroundColor: Colors.white,
            side: const BorderSide(color: Colors.white),
            padding: const EdgeInsets.all(8),
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            foregroundColor: Colors.black,
            backgroundColor: Colors.white,
            padding: const EdgeInsets.all(32),
          ),
        ),
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _highlighted = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedButton(
          highlighted: _highlighted,
          onPressed: () {
            setState(() {
              _highlighted = !_highlighted;
            });
          },
          child: const Text('Button'),
        ),
      ),
    );
  }
}

class AnimatedButton extends StatelessWidget {
  const AnimatedButton({
    required this.child,
    required this.highlighted,
    required this.onPressed,
    super.key,
  });

  final Widget child;
  final bool highlighted;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return AnimatedTheme(
      data: theme.copyWith(
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: highlighted
              ? theme.elevatedButtonTheme.style
              : theme.outlinedButtonTheme.style,
        ),
      ),
      child: OutlinedButton(
        onPressed: onPressed,
        child: child,
      ),
    );
  }
}

结果是（启用“慢动画”）：