Home > Software engineering >  Row shrinks container size Flutter
Row shrinks container size Flutter

Time:04-22

I build the following gesture detector

GestureDetector(
child: Container(
    height: 9.h,
    decoration: BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle,
    boxShadow: [
        BoxShadow(
            color: Colors.grey.withOpacity(0.8),
            spreadRadius: 0,
                        blurRadius: 5,
                        offset: Offset(0, 4),),],),
    child: Center(child: Icon(CupertinoIcons.xmark, color: Colors.white, size:3.5.h,))),
        onTap: () {print("hey");},),

That produces the following gesture detector
enter image description here

However, when I wrap it with a row, it becomes this:

enter image description here

Why does that happen and how can I change it?

Thanks!

CodePudding user response:

check it out below code. I have wrapped it inside a Row. Specified height and width of the container You can also wrap GestureDetector With Expanded inside Row.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Row(
          children: [
            GestureDetector(
              child: Container(
                height: 300,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.black,
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.8),
                      spreadRadius: 0,
                      blurRadius: 5,
                      offset: Offset(0, 4),
                    ),
                  ],
                ),
                child: Center(
                  child: Icon(
                    Icons.close,
                    color: Colors.white,
                    size: 100,
                  ),
                ),
              ),
              onTap: () {
                print("hey");
              },
            ),
          ],
        ),
      ),
    );
  }
}

  • Related