Transparent TextField in flutter

user_14086895 0
Viewed 546

I'm trying to implement a transparent TextField (I'm copying the instagram story editor UI). However I'm getting a TextField with a background color of white. How can I remove the white background and make the TextField transparent?

Here is my code:

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: widget.onTap,
          child: Container(
            color: Colors.black.withOpacity(0.5),
          ),
        ),   
        Center(
          child: Material(
            child: Container(
              color: Colors.transparent,
              child: TextField(
                focusNode: myFocusNode,
                cursorColor: Colors.blueAccent,
                decoration: InputDecoration(
                  fillColor: Colors.transparent,
                  filled: true,
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.only(
                    left: 15,
                    bottom: 11,
                    top: 11,
                    right: 15,
                  ),
                ),
              ),
            ),
          ),
        )

Here is the result of the code above: The Problem

Here is I want it to look like: Solution

Update: Removing Material widget and Container widget and adding Scaffold on the top solved the problem ❤️

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: widget.onTap,
            child: Container(
              color: Colors.black.withOpacity(0.5),
            ),
          ),
          Center(
            child: TextField(
              focusNode: myFocusNode,
              cursorColor: Colors.blueAccent,
              decoration: InputDecoration(
                fillColor: Colors.transparent,
                filled: true,
                border: InputBorder.none,
                contentPadding: EdgeInsets.only(
                  left: 15,
                  bottom: 11,
                  top: 11,
                  right: 15,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
flutter-layout flutter
2 Answers

make Material transparent (also you don't need the Container):

https://www.dartpad.dev/5c0168a92f89ab40b809d2e92c5d51c6?null_safety=true

Center(
  child: Material(
    color: Colors.transparent,
    child: TextField(
      cursorColor: Colors.blueAccent,
      decoration: InputDecoration(
        fillColor: Colors.transparent,
        filled: true,
        border: InputBorder.none,
        contentPadding: EdgeInsets.only(
          left: 15,
          bottom: 11,
          top: 11,
          right: 15,
        ),
      ),
    ),
  ),
);
user_102100690

You don't need to wrap TextField with Container and Material. The Container is the one that is adding a white background to your TextField. You only have to set TextField's border property:

TextField(
   decoration: InputDecoration(
       border: InputBorder.none,
   ),
)

Here is a reference to available options of InputBorder to InputDecoration's border property (It's a good idea to read all the properties in the documentation): https://api.flutter.dev/flutter/material/InputDecoration/border.html

user_95227320
Related