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
However, when I wrap it with a row, it becomes this:
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");
},
),
],
),
),
);
}
}