How To Create Input Field Background Color Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

It looks like it's caused by the splash effect on the textfield. I couldn't find a way to disable it for that specific widget but you can make it Flutter textfield background color on focus. Ask Question Asked 1 year, 6 months ago. It works good, but when user tap on it, a grey color background appears.

How To Create Input Field Background Color Using Flutter App

Input Field Background Color
COmplete Code For Input Field Background Color In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightGreen[900],
        title: Text('Input Field Background Color'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25.0),
          child: TextField(
            controller: _textFieldController,
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.orange,
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(12.0)),
                borderSide: BorderSide(color: Colors.black26),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(12.0)),
                borderSide: BorderSide(color: Colors.grey),
              ),
              contentPadding: EdgeInsets.all(15),
              labelText: "This is the Label",
              labelStyle: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Related Post