13

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

1 Answer 1

19
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),
      ),
    ),
  ],
);
9
  • MainAxisAlignment dosn't have a stretch member. What am I missing? Jan 7, 2019 at 9:57
  • Yes, quite sure. The docs dosn't list it either: docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html Jan 7, 2019 at 10:01
  • ahh, I see you changed it to crossAxisAlignment. That make sense. Jan 7, 2019 at 10:01
  • 1
    Oh yeah, you may want to replace the ListView with a SingleChildScrollView or remove the column from gallerySection Jan 7, 2019 at 11:24
  • 1
    I did as you suggested and changed ListView to singleChildScrollView, and it solved it. Thank you Jan 10, 2019 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.