Flutter样式美化插件awesome_style_field的使用

Flutter样式美化插件awesome_style_field的使用

特性

  • AwesomeStyleField
  • AwesomeStyleFormField
  • AwesomeTextController
  • AwesomeKeyword

支持平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter Desktop

使用方法

添加包到pubspec.yaml

dependencies:
  awesome_style_field: ^<latest-version>

导入包

import 'package:awesome_style_field/awesome_style_field.dart';

TextField 或 TextFormField

  • AwsomeStyleField 继承自 TextField。
  • AwsomeStyleFormField 继承自 TextFormField。
  • 可以自定义 AwsomeStyleField 和 AwsomeStyleFormField 的标签和样式。

新参数

  • AwesomeTextController 继承自 TextEditingController。
  • List<AwesomeKeyword> 用于你的样式。
final AwesomeTextController? controller;
final List<AwesomeKeyword>? keywords;

AwesomeKeyword

  • text 参数是必需的，表示关键字文本。
  • style 参数是可选的，用于设置样式。如果没有传递，则使用父级样式。
  • isDuplicate 设置是否允许重复样式（默认值允许重复）。
  • isLetterCase 启用区分大小写（默认值不区分大小写）。
class AwesomeKeyword {
  final String text;
  final TextStyle? style;
  final bool isDuplicate;
  final bool isLetterCase;

  const AwesomeKeyword({
    required this.text,
    this.style,
    this.isDuplicate = true,
    this.isLetterCase = true,
  });
}

AwesomeTextController

AwesomeTextController controller = AwesomeTextController(initValue: "Tyger");

示例

标签

  • 你可以添加包含样式和标签的 AwesomeKeyword 类到列表。
List<AwesomeKeyword> keywords = [
  AwesomeKeyword(
    text: "Created",
    style: TextStyle(
      color: Colors.indigo,
      fontWeight: FontWeight.bold,
    ),
  ),
  AwesomeKeyword(
    text: "Tyger",
    style: TextStyle(
      color: Colors.pink,
      fontWeight: FontWeight.bold,
    ),
  ),
],

样式

  • 你可以创建自己的样式。
AwesomeKeyword(
  text: "Created",
  style: TextStyle(
    color: Colors.limeAccent,
    fontSize: 24,
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.bold,
  ),
),

isDuplicate

isLetterCase

完整示例代码

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

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ExampleAwesomeStyleField(),
  ));
}

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

  [@override](/user/override)
  State<ExampleAwesomeStyleField> createState() => _ExampleAwesomeStyleFieldState();
}

class _ExampleAwesomeStyleFieldState extends State<ExampleAwesomeStyleField> {
  late AwesomeTextController controller;
  final Color _background = const Color.fromRGBO(46, 46, 46, 1);

  final String _word = 
      "Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. - Steve Jobs";

  List<AwesomeKeyword> _quoteKeywords = [];
  List<AwesomeKeyword> _awesomeKeywords = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = AwesomeTextController(initValue: _word);
    _setKeywords();
  }

  void _setKeywords() {
    _awesomeKeywords = const [
      AwesomeKeyword(
        text: "awesome",
        style: TextStyle(
          color: Colors.limeAccent,
          fontSize: 20,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.bold,
        ),
      ),
      AwesomeKeyword(
        text: "style",
        style: TextStyle(
          color: Colors.lightBlueAccent,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      AwesomeKeyword(
        text: "Form",
        style: TextStyle(
          color: Colors.amberAccent,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      AwesomeKeyword(
        text: "field",
        style: TextStyle(
          color: Colors.cyanAccent,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      AwesomeKeyword(
        text: "!",
        style: TextStyle(
          color: Colors.tealAccent,
          fontSize: 20,
          fontWeight: FontWeight.w900,
        ),
      ),
    ];
    _quoteKeywords = const [
      AwesomeKeyword(
          text: "to",
          style: TextStyle(
              color: Color.fromRGBO(135, 135, 135, 1),
              fontSize: 18,
              fontWeight: FontWeight.bold)),
      AwesomeKeyword(
          text: "is",
          style: TextStyle(
            color: Colors.purpleAccent,
            fontSize: 18,
          )),
      AwesomeKeyword(
          text: "Your",
          isLetterCase: false,
          style: TextStyle(
            color: Colors.greenAccent,
            fontSize: 20,
            fontWeight: FontWeight.w900,
          )),
      AwesomeKeyword(
          text: "you",
          style: TextStyle(
            color: Colors.lightBlueAccent,
            fontSize: 20,
            fontWeight: FontWeight.w900,
          )),
      AwesomeKeyword(
          text: "do",
          style: TextStyle(
            color: Colors.limeAccent,
            fontSize: 22,
            fontWeight: FontWeight.bold,
          )),
      AwesomeKeyword(
          text: "do.",
          style: TextStyle(
            color: Colors.limeAccent,
            fontSize: 22,
            fontWeight: FontWeight.bold,
          )),
      AwesomeKeyword(
          text: "Steve",
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.cyan,
          )),
      AwesomeKeyword(
          text: "Jobs",
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.cyan,
          )),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        backgroundColor: _background,
        appBar: AppBar(
          backgroundColor: _background,
          title: const Text(
            "Awesome Style Field",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 22,
              color: Colors.white,
            ),
          ),
        ),
        body: ListView(
          children: [
            Container(
              height: 60,
              margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              child: AwesomeStyleField(
                cursorHeight: 20,
                keywords: _awesomeKeywords,
                style: const TextStyle(fontSize: 20, color: Colors.white),
                decoration: _decoration(),
              ),
            ),
            Container(
              height: 200,
              margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              child: AwesomeStyleFormField(
                controller: controller,
                keywords: _quoteKeywords,
                maxLines: 1000,
                style: const TextStyle(
                    fontSize: 16, color: Colors.white, height: 1.5),
                decoration: _decoration(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  InputDecoration _decoration() => InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.white,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(8),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.white,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(8),
        ),
      );
}

更多关于Flutter样式美化插件awesome_style_field的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter样式美化插件awesome_style_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter样式美化插件awesome_style_field的使用，以下是一个简单的代码示例，展示了如何集成和使用该插件来美化表单字段。

首先，确保你已经在pubspec.yaml文件中添加了awesome_style_field依赖：

dependencies:
  flutter:
    sdk: flutter
  awesome_style_field: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以这样使用AwesomeStyleField：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Style Field Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Style Field Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // 使用 AwesomeStyleTextField
              AwesomeStyleTextField(
                labelText: 'Email',
                keyboardType: TextInputType.emailAddress,
                helperText: 'Enter your email address',
                prefixIcon: Icons.email,
                errorText: null, // 如果需要显示错误，可以设置为错误信息字符串
                onChanged: (value) {
                  // 处理文本变化
                  print('Email: $value');
                },
                onEditingComplete: () {
                  // 处理编辑完成事件
                  print('Email editing complete');
                },
                // 其他可配置参数
                // decoration: BoxDecoration(...),
                // style: TextStyle(...),
                // controller: TextEditingController(),
              ),

              SizedBox(height: 16),

              // 使用 AwesomeStylePasswordField
              AwesomeStylePasswordField(
                labelText: 'Password',
                helperText: 'Enter your password',
                prefixIcon: Icons.lock,
                obscureText: true, // 控制密码显示/隐藏
                onChanged: (value) {
                  // 处理文本变化
                  print('Password: $value');
                },
                onEditingComplete: () {
                  // 处理编辑完成事件
                  print('Password editing complete');
                },
                // 其他可配置参数
                // decoration: BoxDecoration(...),
                // style: TextStyle(...),
                // controller: TextEditingController(),
              ),

              SizedBox(height: 16),

              // 使用 AwesomeStyleDropdownField
              AwesomeStyleDropdownField<String>(
                labelText: 'Gender',
                helperText: 'Select your gender',
                prefixIcon: Icons.person,
                values: ['Male', 'Female', 'Other'],
                onChanged: (value) {
                  // 处理选项变化
                  print('Gender: $value');
                },
                // 其他可配置参数
                // decoration: BoxDecoration(...),
                // style: TextStyle(...),
                // hint: Text('Select...'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在上面的代码中，我们展示了如何使用AwesomeStyleTextField、AwesomeStylePasswordField和AwesomeStyleDropdownField。这些组件提供了丰富的样式和便捷的配置选项，可以帮助你快速美化表单字段。

  • AwesomeStyleTextField 和 AwesomeStylePasswordField 支持常见的文本输入字段功能，如标签文本、帮助文本、前缀图标、文本变化回调和编辑完成回调等。
  • AwesomeStyleDropdownField 提供了一个美观的下拉选择框，支持选项列表、选中值变化回调等。

你可以根据实际需求进一步自定义这些组件的样式和行为。希望这个示例对你有所帮助！

回到顶部