Flutter插件coword的安装及使用

Flutter插件coword的安装及使用

Flutter插件coword安装

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  coword: latest_version

Flutter插件coword基本用法

Coword 插件的基本用法如下：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
),

类型

点类型 (Dots Type)

点类型的展示效果如下图所示：

代码示例：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
    type: CowordTypes.dots,
),

矩形类型 (Rectangle Type)

矩形类型的展示效果如下图所示：

代码示例：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
    type: CowordTypes.rectangle,
),

动画

淡入淡出动画 (Fade Animation)

淡入淡出动画的展示效果如下图所示：

代码示例：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
    cowordAnimation: const CowordAnimation.fade(
        toAnimate: true,
        animationDuration: Duration(milliseconds: 500),
        disappearanceFadeAnimationDuration: Duration(milliseconds: 200),
        curve: Curves.easeOutCubic,
    ),
),

缩放动画 (Scale Animation)

缩放动画的展示效果如下图所示：

代码示例：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
    cowordAnimation: const CowordAnimation.scale(
        toAnimate: true,
        animationDuration: Duration(milliseconds: 500),
        disappearanceFadeAnimationDuration: Duration(milliseconds: 200),
        curve: Curves.easeOutCubic,
        appearanceDisappearanceFadeAnimationEnabled: true,
    ),
),

颜色

匹配颜色 (Match Color)

匹配颜色的展示效果如下图所示：

代码示例：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
    cowordStyle: const CowordStyle(
        matchedColor: Colors.blue,
    ),
),

不匹配颜色 (Unmatch Color)

不匹配颜色的展示效果如下图所示：

代码示例：

Coword(
    passwordController: passwordController,
    confirmationPasswordController: confirmationPasswordController,
    cowordStyle: const CowordStyle(
        unmatchedColor: Colors.purple,
    ),
),

完整示例代码

以下是完整的示例代码：

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

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController passwordController = TextEditingController();
  final TextEditingController confirmationPasswordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextField(
                controller: passwordController,
                decoration: const InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 24),
              Coword(
                passwordController: passwordController,
                confirmationPasswordController: confirmationPasswordController,
              ),
              const SizedBox(height: 24),
              TextField(
                controller: confirmationPasswordController,
                decoration: const InputDecoration(
                  labelText: 'Confirm Password',
                  border: OutlineInputBorder(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    passwordController.dispose();
    confirmationPasswordController.dispose();
    super.dispose();
  }
}