Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set text to match column width in flutter

I have an image and a text in a column. I want the text container to expand to the column width, creating a black border with the text centered.

This is what i got now.

enter image description here

Code.

List<Container> getMediaItem(List<Media> mediaItems) {
  List<Container> mediaContainers = [];
  for (Media media in mediaItems) {
    mediaContainers.add(
      Container(
        padding: EdgeInsets.only(left: 8, right: 8, bottom: 8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            media.image,
            Container(
              color: Colors.black,
              padding: EdgeInsets.only(top: 8, bottom: 8),
              child: Text(media.title),
            )
          ],
        ),
      ),
    );
  }
  return mediaContainers;
}

If you know how to solve it please share.

Update: The full code (I'm trying to make a nested scroll view to display a gallery of media items, like Netflix):

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Live Tree',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Text("LiveTree"),
              Icon(Icons.check_circle_outline),
            ],
          ),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {

    List<Column> getMediaItem(List<Media> mediaItems) {
      List<Column> mediaContainers = [];
      for (Media media in mediaItems) {
        mediaContainers.add(
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              media.image,
              Container(
                color: Colors.black,
                padding: EdgeInsets.only(top: 8, bottom: 8),
                child: Text(media.title),
              )
            ],
          ),
        );
      }
      return mediaContainers;
    }

List<Widget> getCategoryRows(List<CategoryModel> categoryModels) {
      List<Widget> categoryRows = [];
      for (CategoryModel category in categoryModels) {
        final mediaItemsForCategory = getMediaItem(category.media);
        categoryRows.add(
          ListView(scrollDirection: Axis.horizontal,
            children: mediaItemsForCategory,
          ),
        );
      }
      return categoryRows;
    }

    Widget gallerySection = Column(
      mainAxisSize: MainAxisSize.min,
      children: getCategoryRows(mockCategoryDataSet),
    );

    return Scaffold(
      body: ListView(
        children: <Widget>[
              gallerySection,
        ],
      ),
    );
  }
like image 416
Joel Broström Avatar asked Jan 07 '19 09:01

Joel Broström


People also ask

How do you give text a width in Flutter?

Setting the width of a TextField You can set the width of a TextField exactly as you want by wrapping it inside a Container, a SizedBox, or a ContrainedBox widget. Note that the height of the parent widget will not affect the height of the text field inside it.

How do you adjust column width in a table Flutter?

You can use defaultColumnWidth inside Table if you want to set same width to each column, Table( defaultColumnWidth: FixedColumnWidth(200.0), ... you can use a different width for each column. Table( columnWidths: { 0: FlexColumnWidth(1), 1: FlexColumnWidth(4), 2: FlexColumnWidth(4), }, ...

How do you fit text in container Flutter?

Just use the AutoSizeText. rich() constructor (which works exactly like the Text. rich() constructor). The only thing you have to be aware of is how the font size calculation works: The fontSize in the style parameter of AutoSizeText (or the inherited fontSize if none is set) is used as reference.

How do you change the width of a text widget in Flutter?

The width of the Text parent is unknown. So to maximize the width and size of the Text widget in this case, wrap the Text widget in a FittedBox, then an Expanded. child: Column(children: <Widget>[ Expanded( child: FittedBox( fit: BoxFit.

How do I set the width of a textfield in flutter?

This article shows you how to set the width, height, and inner padding of a TextField widget in Flutter. You can set the width of a TextField exactly as you want by wrapping it inside a Container, a SizedBox, or a ContrainedBox widget.

How to change the width of a child widget in flutter?

In this way, you can change the width of any child widget according to the width of parent widget in the Flutter Application. During building an app, sometimes we need to show content according to condition using if..else statement. But in Flutter, we can’t place if…else statement directly on child attribute because it accepts only widgets.

How do I set the width of a text field?

Setting the width of a TextField You can set the width of a TextField exactly as you want by wrapping it inside a Container, a SizedBox, or a ContrainedBox widget. Note that the height of the parent widget will not affect the height of the text field inside it.

How to increase the width of the text widget?

The width of the Text parent is unknown. So to maximize the width and size of the Text widget in this case, wrap the Text widget in a FittedBox, then an Expanded. child: Column (children: <Widget> [ Expanded ( child: FittedBox ( fit: BoxFit.contain, child: Text ( '123', )), ), ]),


1 Answers

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    media.image,
    Container(
      color: Colors.black,
      padding: EdgeInsets.only(top: 8, bottom: 8),
      child: Text(media.title),
    ),
  ],
);

or

Column(
  children: [
    media.image,
    Container(
      color: Colors.black,
      padding: EdgeInsets.only(top: 8, bottom: 8),
      child: Center(
        child: Text(media.title),
      ),
    ),
  ],
);
like image 137
Rémi Rousselet Avatar answered Oct 15 '22 11:10

Rémi Rousselet