行缩小容器大小 Flutter

Question

我构建了以下手势检测器

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

产生以下手势检测器

然而，当我用一行把它包起来时，它变成了这样：

为什么会发生这种情况，我该如何更改？

谢谢！

Answer 1

查看下面的代码。我把它包在一排里。指定容器的高度和宽度您还可以将 GestureDetector 包装在 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");
              },
            ),
          ],
        ),
      ),
    );
  }
}

行缩小容器大小 Flutter

Row shrinks container size Flutter

flutter

user-interface