无法更改 TextField 边框颜色

Question

I am trying to change color of the border of my TextField using a BorderSide , but it does not work.

This is my code below.

new TextField(
  decoration: new InputDecoration(
    border: new OutlineInputBorder(
      borderSide: new BorderSide(color: Colors.teal)
    ),
    hintText: 'Tell us about yourself',
    helperText: 'Keep it short, this is just a demo.',
    labelText: 'Life story',
    prefixIcon: const Icon(Icons.person, color: Colors.green,),
    prefixText: ' ',
    suffixText: 'USD',
    suffixStyle: const TextStyle(color: Colors.green)),
  )
)

Screenshot of the result is shown below.

Answer 1

The new way to do it is to use enabledBorder like this:

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    focusedBorder: ...
    border: ...
  ),
)

Answer 2

That is not changing due to the default theme set to the screen.

So just change them for the widget you are drawing by wrapping your TextField with new ThemeData()

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.redAccent,
            primaryColorDark: Colors.red,
          ),
          child: new TextField(
            decoration: new InputDecoration(
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.teal)),
                hintText: 'Tell us about yourself',
                helperText: 'Keep it short, this is just a demo.',
                labelText: 'Life story',
                prefixIcon: const Icon(
                  Icons.person,
                  color: Colors.green,
                ),
                prefixText: ' ',
                suffixText: 'USD',
                suffixStyle: const TextStyle(color: Colors.green)),
          ),
        ));

Answer 3

Well, I really don't know why the color assigned to border does not work. But you can control the border color using other border properties of the textfield. They are:

1. disabledBorder: Is activated when enabled is set to false
2. enabledBorder: Is activated when enabled is set to true (by default enabled property of TextField is true)
3. errorBorder: Is activated when there is some error (ie a failed validate)
4. focusedBorder: Is activated when we click/focus on the TextField.
5. focusedErrorBorder: Is activated when there is error and we are currently focused on that TextField.

A code snippet is given below:

TextField(
 enabled: false, // to trigger disabledBorder
 decoration: InputDecoration(
   filled: true,
   fillColor: Color(0xFFF2F2F2),
   focusedBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.red),
   ),
   disabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.orange),
   ),
   enabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.green),
   ),
   border: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,)
   ),
   errorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.black)
   ),
   focusedErrorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
   ),
   hintText: "HintText",
   hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
   errorText: snapshot.error,
 ),
 controller: _passwordController,
 onChanged: _authenticationFormBloc.onPasswordChanged,
                            obscureText: false,
),

disabledBorder:

---

enabledBorder:

focusedBorder:

errorBorder:

errorFocusedBorder:

Hope it helps you.

Answer 4

The code in which you change the color of the primaryColor and primaryColorDark does not change the color inicial of the border, only after tap the color stay black

The attribute that must be changed is hintColor

BorderSide should not be used for this, you need to change Theme.

To make the red color default to put the theme in MaterialApp(theme: ...) and to change the theme of a specific widget, such as changing the default red color to the yellow color of the widget, surrounds the widget with:

new Theme(
  data: new ThemeData(
    hintColor: Colors.yellow
  ),
  child: ...
)

Below is the code and gif:

Note that if we define the primaryColor color as black, by tapping the widget it is selected with the color black

But to change the label and text inside the widget, we need to set the theme to InputDecorationTheme

The widget that starts with the yellow color has its own theme and the widget that starts with the red color has the default theme defined with the function buildTheme()

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

ThemeData buildTheme() {
  final ThemeData base = ThemeData();
  return base.copyWith(
    hintColor: Colors.red,
    primaryColor: Colors.black,
    inputDecorationTheme: InputDecorationTheme(
      hintStyle: TextStyle(
        color: Colors.blue,
      ),
      labelStyle: TextStyle(
        color: Colors.green,
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: buildTheme(),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String xp = '0';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Container(
        padding: new EdgeInsets.only(top: 16.0),
        child: new ListView(
          children: <Widget>[
            new InkWell(
              onTap: () {},
              child: new Theme(
                data: new ThemeData(
                  hintColor: Colors.yellow
                ),
                child: new TextField(
                  decoration: new InputDecoration(
                      border: new OutlineInputBorder(),
                      hintText: 'Tell us about yourself',
                      helperText: 'Keep it short, this is just a demo.',
                      labelText: 'Life story',
                      prefixIcon: const Icon(Icons.person, color: Colors.green,),
                      prefixText: ' ',
                      suffixText: 'USD',
                      suffixStyle: const TextStyle(color: Colors.green)),
                )
              )
            ),
            new InkWell(
              onTap: () {},                
              child: new TextField(
                decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.teal)
                    ),
                    hintText: 'Tell us about yourself',
                    helperText: 'Keep it short, this is just a demo.',
                    labelText: 'Life story',
                    prefixIcon: const Icon(Icons.person, color: Colors.green,),
                    prefixText: ' ',
                    suffixText: 'USD',
                    suffixStyle: const TextStyle(color: Colors.green)),
              )
            )
          ],
        ),
      )
    );
  }
}

Answer 5

enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10.0),
  borderSide: BorderSide(color: Colors.red)
),

Answer 6

The best and most effective solution is just adding theme in your main class and add input decoration like these.

theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
        border: OutlineInputBorder(
           borderSide: BorderSide(color: Colors.pink)
        )
    ),
)

Answer 7

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4.0)),
      borderSide: BorderSide(width: 1.0),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blueGrey),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.redAccent),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.orangeAccent),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
    ),
    contentPadding: EdgeInsets.all(10.0),
    hintText: 'Tell us about yourself',
    helperText: 'Keep it short, this is just a demo.',
    labelText: 'Life story',
    prefixIcon: const Icon(
      Icons.person,
      color: Colors.green,
    ),
    prefixText: ' ',
    suffixText: 'USD',
    suffixStyle: const TextStyle(color: Colors.green),
  ),
),

Answer 8

1. Inside your lib file

2. Create a folder called colors .

3. Inside the colors folder create a dart file and name it color .

4. Paste this code inside it

   const MaterialColor primaryOrange = MaterialColor( _orangePrimaryValue, <int, Color>{ 50: Color(0xFFFF9480), 100: Color(0xFFFF9480), 200: Color(0xFFFF9480), 300: Color(0xFFFF9480), 400: Color(0xFFFF9480), 500: Color(0xFFFF9480), 600: Color(0xFFFF9480), 700: Color(0xFFFF9480), 800: Color(0xFFFF9480), 900: Color(0xFFFF9480), }, ); const int _orangePrimaryValue = 0xFFFF9480;

5. Go to your main.dart file and place this code in your theme

   theme:ThemeData( primarySwatch: primaryOrange, ),

6. Import the color folder in your main.dart like this import 'colors/colors.dart' ;

Answer 9

border: OutlineInputBorder(borderSide: BorderSide(color: CustomColors.primaryColor),),

Answer 10

We have tried custom search box with the pasted snippet. This code will useful for all kind of TextFiled decoration in Flutter. Hope this snippet will helpful for others.

Container(
        margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        child:  new Theme(
          data: new ThemeData(
           hintColor: Colors.white,
            primaryColor: Colors.white,
            primaryColorDark: Colors.white,
          ),
          child:Padding(
          padding: EdgeInsets.all(10.0),
          child: TextField(
            style: TextStyle(color: Colors.white),
            onChanged: (value) {
              filterSearchResults(value);
            },
            controller: editingController,
            decoration: InputDecoration(
                labelText: "Search",
                hintText: "Search",
                prefixIcon: Icon(Icons.search,color: Colors.white,),
                enabled: true,
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                    borderRadius: BorderRadius.all(Radius.circular(25.0))),
                border: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.white, width: 0.0),
                    borderRadius: BorderRadius.all(Radius.circular(25.0)))),
          ),
        ),
        ),
      ),

Answer 11

You can use this code for bottom sheets as well as for normal text fields :

class TextFieldForDropDown extends StatelessWidget {
      final String title;
      final String hintText;
      final TextEditingController textEditingController;
      bool isPassword;
      final Function onTap;
      final bool enable;
      TextFieldForDropDown({this.title, this.hintText, this.textEditingController, this.isPassword = false, this.onTap, this.enable});
      @override
      Widget build(BuildContext context) {
    
        var titleTextStyle = TextStyle(
          color: Color(0xff9098C8),
          fontSize: 12,
          fontWeight: FontWeight.w400,
          fontFamily: "Muli",
        );
    
        var textFieldTextStyle = TextStyle(
          color: Colors.white,
          fontSize: 14,
          fontWeight: FontWeight.w400,
          fontFamily: "Muli",
        );
    
        var borderSides = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xff38406B)));
        var borderSides1 = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff)));
    
        return InkWell(
          onTap: onTap,
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(this.title, style: titleTextStyle),
                SizedBox(height: 8),
                TextFormField(
                  enabled: enable,
                  // onTap: onTap,
                  obscureText: isPassword,
                  style: textFieldTextStyle,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                    hintText: this.hintText,
                    hintStyle: titleTextStyle,
                    border: textEditingController.text != "" ? borderSides1 :borderSides,
                    enabledBorder:  textEditingController.text != "" ? borderSides1 :borderSides,
                    disabledBorder: textEditingController.text != "" ? borderSides1 :borderSides,
                    focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff))),
                  ),
                  controller: textEditingController,
                )
              ],
            ),
          ),
        );
      }
    }

and use like this :

TextFieldForDropDown(
                                title: 'Phone Number*',
                                hintText: '+123-22-223-00',
                                textEditingController: viewModel.phoneController,
                              ),

Answer 12

Padding(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
            child: TextField(
              cursorColor: Color.fromRGBO(25, 118, 218, 1),
              decoration: new InputDecoration(
                border: new OutlineInputBorder(
                  borderSide:
                      new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
                ),
                focusedBorder: new OutlineInputBorder(
                  borderSide:
                      new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
                ),
                labelText: "Edit Phone",
                labelStyle: TextStyle(
                  color: Colors.grey,
                ),
                prefixIcon: const Icon(
                  Icons.phone_outlined,
                  color: Color.fromRGBO(25, 118, 218, 1),
                ),
              ),
            ),
          ),

Thank me later :)