How to wrap the Row according to child Text widget in Flutter - flutter

Question

I have this piece of code inside a scaffold with SafeArea:
Column(
children: [Flexible(
fit: FlexFit.loose,
child: Container(
// width: 130,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Icon(Icons.ac_unit), Text("Trending")],
),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300]),
),
)]
)
Which gives the following result:
What I want to achieve is this:
How do I make the row warp around the text.

Answer 1

from the documentation
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
)
if you want to use that row just do
Row(
mainAxisSize: MainAxisSize.min
children: [
...
])
replace that Chip() with the above row
Edit:
replace the Chip() with that _buildChip() custom widget something like this, It should give you a better control over the widget
import 'package:flutter/material.dart';
main() {
runApp(MaterialApp(
home: MyPage(),
));
}
class MyPage extends StatelessWidget {
Widget _buildChip() {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey.withOpacity(.4) ),
child: InkWell(
highlightColor: Colors.blue.withOpacity(.4),
splashColor: Colors.green,
borderRadius: BorderRadius.circular(20),
onTap: () {
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 7),
child: Row(
mainAxisSize: MainAxisSize.min,
children:[
Icon(Icons.ac_unit, size: 14),
SizedBox(width: 10),
Text("Trending")
]),
),
),
);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
_buildChip(),
_buildChip(),
_buildChip(),
_buildChip(),
_buildChip(),
],
)
);
}
}
let me know if It is what you want, so that I edit that answer

Answer 2

Take a look at this example. You should be using Wrap and RichText to achieve this design. Not Flexible, because it will take all the available space.
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 {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
#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: Wrap(children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey[300]),
child: RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Icon(Icons.ac_unit, size: 14),
),
TextSpan(
text: "Trending",
),
],
),
),
),
SizedBox(width: 5,),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey[300]),
child: RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Icon(Icons.ac_unit, size: 14),
),
TextSpan(
text: "Trending",
),
],
),
),
)
]),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}