Flutter Elevated 和 Outlined 按钮之间的动画

发布于04月05日

我想要一个在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,
              ),
      ),
    );
  }
}

下面是它看起来的样子:

我希望过渡是"平稳的".当按钮从一种样式更改为另一种样式时，它希望将其设置为动画.如何做到这一点？

推荐答案

我设法用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,
      ),
    );
  }
}

结果是(启用了"慢速动画"):