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


Solution 1: Rémi Rousselet

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