Flutter自定义文本输入框外观插件text_form_field_outline的使用

安装

1. 在你的pubspec.yaml文件中添加此包的最新版本（并运行dart pub get）：

dependencies:
  text_form_field_outline: ^0.0.3

1. 导入包并在你的Flutter应用中使用它：

import 'package:text_form_field_outline/text_form_field_outline.dart';

特性

• 默认边框围绕文本输入框
• 可以更改边框颜色
• 可以更改边框圆角半径

开始使用

以下是一个简单的示例，展示如何在应用中使用TextFormFieldOutline：

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

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Form Field Outline',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Text Form Field Outline'),
    );
  }
}

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> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: TextFormFieldOutline(),
        ),
      ),
    );
  }
}

图片

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用TextFormFieldOutline：

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

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Form Field Outline',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试这样做：运行`flutter run`。你会看到应用有一个紫色的工具栏。然后，在不退出应用的情况下，
        // 将下面的颜色方案中的seedColor更改为Colors.green，然后执行热重载（保存你的更改或按下IDE中的“热重载”按钮，或者如果使用命令行启动应用，则按“r”）。
        //
        // 注意：计数器并没有重置为零；应用的状态不会在重载时丢失。要重置状态，使用热重启。
        //
        // 这也适用于代码，而不仅仅是值：大多数代码更改都可以通过热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Text Form Field Outline'),
    );
  }
}

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

  // 这个小部件是你的应用的主页。它是有状态的，意味着它有一个状态对象（定义在下面），其中包含影响其外观的字段。
  // 这个类是状态的配置。它保留了由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题），并且被状态的构建方法使用。
  // 小部件子类中的字段总是标记为“final”。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: TextFormFieldOutline(),
        ),
      ),
    );
  }
}