Search code examples
flutterdartcontainersborderoutline

Cannot apply decoration to Container in Flutter


After applying border to my Container, it disappears with this error:

Incorrect use of ParentDataWidget.

After commenting decoration. Widget is rendered. But i need to give outline border like this:

enter image description here

I am getting this commenting the decoration:

enter image description here

  Container(
    child: Row(
      children: [
        Container(

          // commenting this line fixes the issue
          decoration: BoxDecoration( borderRadius: BorderRadius.circular(10) ),
          child: Expanded(
            child: Row(
              children: [
                Icon(LineAwesomeIcons.search),
                Expanded(
                  child: TextField(
                    decoration: null,
                    minLines: 1,
                    maxLines: 2,

                    controller: pickupController,
                    onChanged: (val) {

                    },
                  ),
                ),
                Icon(LineAwesomeIcons.times),
              ],
            ),
          ),
        ),
        SizedBox(width: 20,),
        Text('Map'),
      ],
    ),
  )

Solution

  • You can just decorate the TextField.

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      prefixIcon: const Icon(Icons.search),
                      suffixIcon: const Icon(Icons.close),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: const BorderSide(
                          color: Colors.grey,
                          width: 1,
                        ),
                      ),
                    ),
                  ),
                ),
                FlatButton(
                  onPressed: () {},
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  visualDensity: VisualDensity.compact,
                  child: const Text('Map'),
                ),
              ],
            ),
          ),
        );
      }
    }