Flutter动态切换Widget插件widget_switcher的使用

widget_switcher 是一个可以让你在不同 Widget 之间进行动画切换的 Flutter 插件。此包目前仍在开发中。

特性

• 可以选择要切换的任意 Widget。
• 可以根据需求调整动画效果。
• 支持嵌套 Widget，提供更多选项。

开始使用

在你的 Flutter 项目中添加依赖：

dependencies:
  widget_switcher: any

导入包：

import 'package:widget_switcher/widget_switcher.dart';

使用示例

以下是一个简单的例子，展示了如何使用 widget_switcher 来动态切换 Widget。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  bool isUnlocked = false;

  Widget textField() {
    return SizedBox(
      width: 300,
      child: TextField(
        textAlign: TextAlign.center,
        obscureText: true,
        cursorColor: Colors.white,
        onChanged: (value) {
          if (value == "keyword") {
            FocusManager.instance.primaryFocus?.unfocus();
            setState(() {
              isUnlocked = true;
            });
          }
        },
        style: const TextStyle(color: Colors.white),
        decoration: InputDecoration(
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: const BorderSide(color: Colors.deepPurpleAccent),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: const BorderSide(color: Colors.deepPurple),
          ),
          contentPadding: const EdgeInsets.all(10),
          filled: true,
          fillColor: Colors.deepPurple,
          hintText: "Keyword",
          hintStyle: const TextStyle(color: Colors.grey),
        ),
      ),
    );
  }

  Widget button() {
    return Material(
      color: Colors.transparent,
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.deepPurple,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: const Icon(
            Icons.check,
            color: Colors.white,
          ),
          onPressed: () {
            setState(() {
              isUnlocked = false;
            });
          },
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: WidgetSwitcher(
          firstWidget: textField(),
          secondWidget: button(),
          switchToSecondWidget: isUnlocked,
        ),
      ),
    );
  }
}