How to wrap the Row according to child Text widget in 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),
      ),
    );
  }
}