表单小部件的全局样式

Question

我想知道如何将全局样式应用于我的表单字段。我发现自己不得不重复代码来更改： 1. 背景颜色 2.文字颜色 3.边界半径 4.边框粗细 5.盒子阴影

所以我决定创建一个这样的自定义小部件：

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

class CustomTextField extends StatefulWidget {
  final String title;
  final String labelText;
  final String hintText;
  final IconData icon;
  final TextInputType keyboardType;
  final bool isPasswordField;
  final TextEditingController controller;
  final bool enabled;
  final int maxLines;
  final Function onTap;
  final bool readOnly;
  final bool isOutlineBorder;
  final List<TextInputFormatter> inputFormatters;
  final String Function(String) validator;

  const CustomTextField({
    Key key,
    this.title,
    this.labelText,
    this.hintText,
    this.icon,
    this.keyboardType = TextInputType.text,
    this.isPasswordField = false,
    this.controller,
    this.enabled = true,
    this.maxLines = 1,
    this.onTap,
    this.readOnly = false,
    this.isOutlineBorder = true,
    this.inputFormatters,
    this.validator,
  }) : super(key: key);

  @override
  _CustomTextFieldState createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    final outlineBorder = OutlineInputBorder(
      borderRadius: BorderRadius.circular(30.0),
      borderSide: BorderSide(
        color: Colors.grey.withOpacity(0.4),
      ),
    );

    final underlineBorder = UnderlineInputBorder(
      borderSide: BorderSide(
        color: Colors.grey.withOpacity(0.4),
      ),
    );

    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildTitle(),
          TextFormField(
            validator: widget.validator,
            decoration: InputDecoration(
              labelText: widget.labelText,
              labelStyle: TextStyle(
                fontWeight: FontWeight.w600,
                color: Colors.grey.withOpacity(0.5),
              ),
              hintText: widget.hintText,
              prefixIcon: widget.icon != null
                  ? Icon(
                      widget.icon,
                      color: Colors.grey.withOpacity(0.4),
                    )
                  : null,
              enabledBorder:
                  widget.isOutlineBorder ? outlineBorder : underlineBorder,
              border: widget.isOutlineBorder ? outlineBorder : underlineBorder,
              suffixIcon: widget.isPasswordField
                  ? _buildPasswordFieldVisibilityToggle()
                  : null,
              contentPadding: EdgeInsets.symmetric(
                vertical: 15.0,
                horizontal: 10.0,
              ),
            ),
            keyboardType: widget.keyboardType,
            style: TextStyle(
              fontWeight: FontWeight.w600,
              color: Colors.black38,
            ),
            cursorColor: Theme.of(context).primaryColor,
            obscureText: widget.isPasswordField ? _obscureText : false,
            controller: widget.controller,
            enabled: widget.enabled,
            maxLines: widget.maxLines,
            onTap: widget.onTap ?? null,
            readOnly: widget.readOnly ?? false,
            inputFormatters: widget.inputFormatters ?? null,
          ),
        ],
      ),
    );
  }

  Widget _buildPasswordFieldVisibilityToggle() {
    return IconButton(
      icon: Icon(
        _obscureText ? Icons.visibility_off : Icons.visibility,
      ),
      onPressed: () {
        setState(() {
          _obscureText = !_obscureText;
        });
      },
    );
  }

  Widget _buildTitle() {
    return widget.title == null
        ? Container()
        : Text(
            widget.title,
            style: TextStyle(
              color: Colors.grey,
              fontSize: 15.0
            ),
          );
  }
}

但是，由于我是 Flutter 新手，我想知道是否有办法为表单字段设置全局样式以更改这些属性：

background color
text color
border radius
border thickness
box shadow

我不必像这样创建自定义小部件类。或者我将如何声明可以分配给我的任何 TextFormField 小部件的 InputDecoration 类？

Answer 1

您可以创建 ThemeData 来设置一些属性 im 主页到所有 TextFormField 输入装饰，如下所示：

return MaterialApp(...
theme: ThemeData(
  primarySwatch: Colors.blue,
  accentColor: main_color_orange,
textTheme: TextTheme(
   bodyText2: TextStyle(
   // defualt all text widget
   color: Colors.white,
   fontSize: 16.0,
   fontFamily: 'Iranian'),
              ),
  // fill back inside all TextFormField
  inputDecorationTheme: InputDecorationTheme(
    fillColor: Colors.black,
    filled: true,
  ),

使用textTheme，您可以将自己的风格和使用方式转换为如下代码：

child: Text("Social POSH Music Network",
       textAlign: TextAlign.center,
       style: Theme.of(context).textTheme.bodyText1),
),