Fit height of expanded row

Question

I tried to make a horizontal list inside content of vertical list but I ended up expanding my height of row, I don't want to use container and height as it can be different result in different phone screen(my assumption). here is what I tried to achieve and here is what I I've done so far

here is my code:

class _TestingScreenState extends State<TestingScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Testing Screen"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                CircleAvatar(
                  radius: 30,
                  child: Text("HE"),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    // ignore: prefer_const_literals_to_create_immutables
                    children: [
                      Text(
                        "Title",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                        // overflow: TextOverflow.ellipsis,
                      ),
                      Expanded(
                        child: ListView(
                            scrollDirection: Axis.horizontal,
                            children: List.generate(10, (i) {
                              final hashTag = 'Hello';
                              return buildHashTag(i, hashTag, context);
                            })),
                      )
                    ],
                  ),
                ),
                Container(
                  width: 30,
                  color: Colors.amber,
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  Padding buildHashTag(int i, String hashTag, BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(right: 5),
      child: Text(
        "#Hello",
        style: TextStyle(),
      ),
    );
  }
}

score -1 · Accepted Answer · answered Dec 21 '21 at 07:52

One way to make your app responsive is to use MediaQuery class to get the width and height of the device which the app is running on, I removed your Expanded widgets and used MediaQuery instead for sizing. When you are using a horizontal ListView you need to provide a height for it, so check the code below:

    @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(
        title: const Text("Testing Screen"),
      ),
      body: Container(
        margin: EdgeInsets.all(width * 0.01),
        decoration:
            BoxDecoration(border: Border.all(color: Colors.black, width: 2)),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            CircleAvatar(
              radius: width * 0.07,
              child: const Text("HE"),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              // ignore: prefer_const_literals_to_create_immutables
              children: [
                const Text(
                  "Title",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  width: width * 0.7,
                  child: const Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                    textAlign: TextAlign.justify,
                    softWrap: true,

                    // overflow: TextOverflow.ellipsis,
                  ),
                ),
                SizedBox(
                  height: height * 0.05,
                  width: width * 0.7,
                  child: ListView(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      children: List.generate(10, (i) {
                        const String hashTag = 'Hello';
                        return buildHashTag(i, hashTag, width);
                      })),
                )
              ],
            ),
            Container(
              width: width * 0.1,
              height: height * 0.07,
              color: Colors.amber,
            )
          ],
        ),
      ),
    );
  }

  Padding buildHashTag(int i, String hashTag, double width) {
    return Padding(
      padding: EdgeInsets.only(right: width * 0.05),
      child: Text(
        '#$hashTag',
      ),
    );
  }
}

and this is the output:

Is there any way to make it without adding height into container? because I'm afraid that the avatar and container on the side wont be centered correctly — Raka Prasetyo, Dec 21 '21 at 12:53
@RakaPrasetyo They will be always centered since they are in a Column with the `mainAxisAlignment: MainAxisAlignment.center,` but check this answer for other approaches https://stackoverflow.com/questions/54668966/horizontal-listview-flutter-without-explicit-height — Amir Hossein Rahmanzadeh, Dec 21 '21 at 14:01

Fit height of expanded row

1 Answers1