flutter 在焦点上抖动文本字段背景色

ckx4rj1h  于 2023-03-04  发布在  Flutter
关注(0)|答案(4)|浏览(181)

我有一个圆形的文本域。它工作得很好,但是当用户点击它的时候,一个灰色的背景出现了。我怎样才能禁用这个飞溅效果呢?
这是我的代码和结果:

new Container(
          margin: const EdgeInsets.only(left: 30.0, top: 60.0, right: 
         30.0),
          height: 40.0,
          decoration: new BoxDecoration(

          color: Colors.white,

            borderRadius: new BorderRadius.all(new Radius.circular(25.7))
          ),

          child: new Directionality(

              textDirection: TextDirection.ltr,
              child: new TextField(
                controller: null,
                autofocus: false,

                style:
                    new TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
                decoration: new InputDecoration(
                  filled: true,

                  fillColor: Colors.white,
                  hintText: 'Username',
                  contentPadding: const EdgeInsets.only(
                      left: 14.0, bottom: 8.0, top: 8.0),
                  focusedBorder: OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.white),
                    borderRadius: new BorderRadius.circular(25.7),
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: new BorderSide(color: Colors.white),
                    borderRadius: new BorderRadius.circular(25.7),
                  ),
                ),
              ))),

2w3rbyxf

2w3rbyxf1#

这看起来像是由文本域的飞溅效果引起的,我找不到一种方法来禁用这个特定的小部件,但是你可以通过将你的TextField Package 在一个Theme小部件中并将splashColor设置为透明来使它透明:

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.transparent),
  child: TextField(
    autofocus: false,
    style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      hintText: 'Username',
      contentPadding:
          const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
    ),
  ),
);
jslywgbw

jslywgbw2#

“ Flutter 文本域背景色”
*更改flutter中TextField的边框颜色

TextFormField(
        decoration: InputDecoration(
          labelText: "Resevior Name",
          fillColor: Colors.white,
          focusedBorder:OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.white, width: 2.0),
            borderRadius: BorderRadius.circular(25.0),
          ),
        ),
      )

文本字段窗体颜色抖动

TextField(
  style: TextStyle(color: Colors.red),
  decoration: InputDecoration(fillColor: Colors.orange, filled: true),
)

** Flutter 文本窗体域背景色**

TextFormField(
    decoration: InputDecoration(
        labelText: "Resevior Name",
        fillColor: Colors.white,
        filled: true, // dont forget this line
        ...
    )
    ...
)

浮动文本域标签颜色

labelStyle: TextStyle(
    color: Colors.white,
)

彩色文本域文本抖动

TextField(
  style: TextStyle(color: Colors.white),
  ...
)
3df52oht

3df52oht3#

使用BorderSide.none作为:

border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10.0),
    borderSide: BorderSide.none,
),
eqqqjvef

eqqqjvef4#

这是一个4年前的问题,现在很多东西都已经改变了,但我会回答这个问题,因为我最近经历了这样的要求,我敢打赌,这个解决方案将为每个人工作,所以让我们开始吧。所以,根据我的理解,你有一个以上的文本字段在您的屏幕上,你想改变颜色时,你点击输入不同的文本字段。因此,它可以做很多不同的方式,我将分享我喜欢的最直观的方式。步骤:-1.使颜色变量的每一个textFields你是在你的屏幕上。2.初始化默认颜色在InItState(){}。(例如,我想我的所有字段没有颜色,所以我将颜色。透明)3.使填充:4.将filledColor设置为您为特定textField的颜色创建的变量。5.更改onTap变量的值:现在你的面条已经准备好了,只要在阅读完这些步骤后浏览代码就可以了。

import '../flutter_flow/flutter_flow_theme.dart';
import '../flutter_flow/flutter_flow_util.dart';
import '../flutter_flow/flutter_flow_widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
import 'package:provider/provider.dart';
import 'personal_info2by2_component_model.dart';
export 'personal_info2by2_component_model.dart';

class PersonalInfo2by2ComponentWidget extends StatefulWidget {
  const PersonalInfo2by2ComponentWidget({Key? key}) : super(key: key);

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

class _PersonalInfo2by2ComponentWidgetState
    extends State<PersonalInfo2by2ComponentWidget> {
  late PersonalInfo2by2ComponentModel _model;

  late AutovalidateMode firstNameAutoValidateMode;
  late AutovalidateMode lastNameAutoValidateMode;
  late AutovalidateMode emailAutoValidateMode;
  late AutovalidateMode phoneAutoValidateMode;
  late Color firstNameFocusColor;
  late Color lastNameFocusColor;
  late Color emailFocusColor;
  late Color phoneFocusColor;

  @override
  void setState(VoidCallback callback) {
    super.setState(callback);
    _model.onUpdate();
  }

  @override
  void initState() {
    super.initState();
    _model = createModel(context, () => PersonalInfo2by2ComponentModel());

    _model.firstNameTextFieldController ??= TextEditingController();
    _model.lastNameTextFieldController ??= TextEditingController();

    firstNameFocusColor = Colors.transparent;
    lastNameFocusColor = Colors.transparent;

     WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
  }

  @override
  void dispose() {
    _model.maybeDispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
   return Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(),
        child: Form(
          key: _model.formKey,
          //autovalidateMode: AutovalidateMode.disabled,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              Padding(
                padding: EdgeInsetsDirectional.fromSTEB(0, 10, 0, 30),
                child: Text(
                  'Personal Details',
                  style: FlutterFlowTheme.of(context).bodyText1.override(
                        fontFamily: 'Poppins',
                        fontSize: 22,
                      ),
                ),
              ),
              TextFormField(
                controller: _model.firstNameTextFieldController,
                autovalidateMode: firstNameAutoValidateMode,
                autofocus: true,
                textCapitalization: TextCapitalization.words,
                obscureText: false,

                onTap: () {
                  setState(() {
                    firstNameFocusColor = Colors.yellow[50]!;
                    lastNameFocusColor = Colors.transparent;
                  });
                },
                decoration: InputDecoration(
                  fillColor: firstNameFocusColor,
                  filled: true,
                ),
              ),
              TextFormField(
                controller: _model.lastNameTextFieldController,
                autovalidateMode: lastNameAutoValidateMode,
                autofocus: true,
                textCapitalization: TextCapitalization.words,
                obscureText: false,
                onTap: () {
                  setState(() {
                    lastNameAutoValidateMode = AutovalidateMode.onUserInteraction;

                    firstNameFocusColor = Colors.transparent;
                    lastNameFocusColor = Colors.yellow[50]!;
                  });
                },
                decoration: InputDecoration(
                  filled: true,
                  fillColor: lastNameFocusColor,
                ),
              ),
            ],
          ),
        ),
      );
  }
}

相关问题