How to change width and color of the border in Flutter

Question

I'm trying to change the color of the border of a OutlineInputBorder using borderSide(), but it's not working, here's my code:

TextField(
 keyboardType: TextInputType.text,
 style: TextStyle(fontSize: 15),
 decoration: InputDecoration(
 contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 10),
 hintText: "Senha",
 filled: true,
 fillColor: new Color(0xfffafafa),
 border: OutlineInputBorder(
 borderSide: BorderSide(
 color: Colors.red,
 width: 2.0,
 ),
 borderRadius: BorderRadius.circular(5),
 ),
 ),
),

• user14089096: Check that and modify according to your need stackoverflow.com/questions/50122394/…

Answer 1

There are many states for a text field. The text field can be enabled, disabled, etc. and you need to handle the cases for the different states. You need to declare the style of your borders for the different states that a text field can have.

In your case, I suspect you are interested in setting the focusedBorder to change the style of the border when the text field is being focused. Consider this example you can run on dartpad.dev.

// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter Demo',
 debugShowCheckedModeBanner: false,
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: MyHomePage(title: 'Flutter Demo Home Page'),
 );
 }
}
class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);
 final String title;
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0;
 void _incrementCounter() {
 setState(() {
 _counter++;
 });
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(widget.title),
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 TextFormField(
 decoration: InputDecoration(
 labelText: 'labelText',
 hintText: 'hintText',
 filled: true,
 fillColor: Theme.of(context).canvasColor,
 counterText: "counterText ",
 focusedBorder: OutlineInputBorder(
 borderRadius: BorderRadius.circular(5),
 borderSide: BorderSide(
 width: 3,
 color: Colors.green,
 ),
 ),
 enabledBorder: OutlineInputBorder(
 borderRadius: BorderRadius.circular(5),
 borderSide: BorderSide(
 width: 1,
 color: Colors.red,
 ),
 ),
 ),
 ),
 ],
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: _incrementCounter,
 tooltip: 'Increment',
 child: Icon(Icons.add),
 ),
 );
 }
}

You can see I put the border to red when it is active but not being focused, and then green when the text field is being focused. Try out different border styles for other text field states, such as errorBorder and see how it behaves.