1

I have this SectorWidget that I meant it to be something decoupled.

I will pass to it a list of views (of the same height) but I wouldn't like to specify the height hardcoded inside ListView nor outside. I would like it to occupy the same height of widgets, something like wrap_content in Android. But I tried a lot of ways (like this or this) after search and cannot achieve this. Is there a way to do that in my specific case?

import 'package:flixapp/colors.dart';
import 'package:flutter/material.dart';

class SectorWidget extends StatelessWidget {
  final SectorViewModel viewModel;

  SectorWidget(this.viewModel);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: kSplashColor,
              onTap: () {},
              child: Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text(
                    viewModel.title,
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: Colors.black54,
                        fontSize: 30),
                  ),
                ),
              ),
            ),
          ),
          decoration: BoxDecoration(
              color: viewModel.titleBackgroundColor ?? Colors.amber),
        ),
        Container(
          color: Colors.red,
          child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: viewModel.data?.length ?? 0,
            itemBuilder: (BuildContext context, int index) {
              var data = viewModel.data;
              if (data.isNotEmpty) return viewModel.data[index];
            },
          ),
        )
      ],
    );
  }
}

class SectorViewModel {
  String title;
  Color titleBackgroundColor;
  List<Widget> data;

  SectorViewModel({this.title, this.titleBackgroundColor, this.data});
}
Mazin Ibrahim
  • 7,433
  • 2
  • 33
  • 40
alexpfx
  • 6,412
  • 12
  • 52
  • 88

1 Answers1

1

When I understand you correctly, you want the root Column widget to match the size of it's children. For this, simply pass in mainAxisSize: MainAxisSize.min (the default is MainAxisSize.max - which I find a bit annoying as well, but anyway.)

also: There is no need for width: MediaQuery.of(context).size.width, in the child Container.. just tell the parent Column() to stretch it's children cross axis: crossAxisAlignment: CrossAxisAlignment.stretch.

Herbert Poul
  • 4,512
  • 2
  • 31
  • 48
  • It doesn't work. I have to set the height of the container that wraps listview. The column fit the same size of this container, but I need that this container have the same size of its listview shields, because i don't know the size of the childrens of this listview. – alexpfx Mar 24 '19 at 20:31
  • okay i think I finally understood what you are asking.. but i'm still not sure how it should work.. you are lazily creating children in the `ListView`.. how is the `ListView` supposed to know the height of children that aren't even created yet? – Herbert Poul Mar 24 '19 at 20:54
  • yes, maybe it couldn't be possible. but, if I set the height of the listview (via container), is there a way to make each item to fit exactly in a cell of the listview, keeping the aspect ratio? – alexpfx Mar 24 '19 at 21:00
  • take a look at the `AspectRatio` widget https://docs.flutter.io/flutter/widgets/AspectRatio-class.html .. if this doesn't solve your problem, maybe provide some more details. – Herbert Poul Mar 24 '19 at 21:10
  • I already tried with aspect ratio, but I could not make it work the way I want it to. – alexpfx Mar 24 '19 at 21:11
  • Okay maybe you can fill me in on what you tried, what you got and what you want.. – Herbert Poul Mar 24 '19 at 21:28