Cannot apply decoration to Container in Flutter - flutter

Question

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:
I am getting this commenting the decoration:
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'),
],
),
)

Answer 1

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'),
),
],
),
),
);
}
}

Answer 2

This should do the job:
Row(
children: [
Flexible(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: controller,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
color: Colors.black,
),
suffixIcon: IconButton(
icon: Icon(
Icons.close,
color: Colors.black,
),
onPressed: () {
//TODO: implement functionality here.
},
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black.withOpacity(
0.1,
),
),
borderRadius: BorderRadius.circular(10),
),
),
),
),
),
Text(
"Map",
style:
TextStyle(fontWeight: FontWeight.w400, fontSize: 25),
)
],
),
Where did you go wrong:
The Row widget wants to determine the intrinsic size of its non-flexible children so it knows how much space that it has left for the flexible ones. However, TextField doesn't have an intrinsic width; it only knows how to size itself to the full width of its parent container. Try wrapping it in a Flexible or Expanded to tell the Row that you're expecting the TextField to take up the remaining space:

Answer 3

add width size to the second Container
then add border: Border.all() to BoxDecoration
Container(
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
border: Border.all(),
),
child: Expanded(
child: Row(
children: [
Icon(Icons.search),
Expanded(
child: TextField(
decoration: null,
minLines: 1,
maxLines: 2,
onChanged: (val) {},
),
),
Icon(Icons.clear),
],
),
),
),
SizedBox(
width: 20,
),
Text('Map'),
],
),
),