fix(mobile): navigation panel overlaps with right rotate (#12950)

fix: navigation panel overlaps with right rotate
This commit is contained in:
Lauritz Tieste 2024-09-27 03:40:07 +02:00 committed by GitHub
parent a6e703ed6b
commit 42ad3e6bb0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -51,107 +51,109 @@ class CropImagePage extends HookWidget {
], ],
), ),
backgroundColor: context.scaffoldBackgroundColor, backgroundColor: context.scaffoldBackgroundColor,
body: LayoutBuilder( body: SafeArea(
builder: (BuildContext context, BoxConstraints constraints) { child: LayoutBuilder(
return Column( builder: (BuildContext context, BoxConstraints constraints) {
children: [ return Column(
Container( children: [
padding: const EdgeInsets.only(top: 20), Container(
width: constraints.maxWidth * 0.9, padding: const EdgeInsets.only(top: 20),
height: constraints.maxHeight * 0.6, width: constraints.maxWidth * 0.9,
child: CropImage( height: constraints.maxHeight * 0.6,
controller: cropController, child: CropImage(
image: image, controller: cropController,
gridColor: Colors.white, image: image,
), gridColor: Colors.white,
),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: context.scaffoldBackgroundColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
), ),
child: Center( ),
child: Column( Expanded(
mainAxisAlignment: MainAxisAlignment.center, child: Container(
children: [ width: double.infinity,
Padding( decoration: BoxDecoration(
padding: const EdgeInsets.only( color: context.scaffoldBackgroundColor,
left: 20, borderRadius: const BorderRadius.only(
right: 20, topLeft: Radius.circular(20),
bottom: 10, topRight: Radius.circular(20),
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
bottom: 10,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(
Icons.rotate_left,
color: Theme.of(context).iconTheme.color,
),
onPressed: () {
cropController.rotateLeft();
},
),
IconButton(
icon: Icon(
Icons.rotate_right,
color: Theme.of(context).iconTheme.color,
),
onPressed: () {
cropController.rotateRight();
},
),
],
),
), ),
child: Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: <Widget>[
IconButton( _AspectRatioButton(
icon: Icon( cropController: cropController,
Icons.rotate_left, aspectRatio: aspectRatio,
color: Theme.of(context).iconTheme.color, ratio: null,
), label: 'Free',
onPressed: () {
cropController.rotateLeft();
},
), ),
IconButton( _AspectRatioButton(
icon: Icon( cropController: cropController,
Icons.rotate_right, aspectRatio: aspectRatio,
color: Theme.of(context).iconTheme.color, ratio: 1.0,
), label: '1:1',
onPressed: () { ),
cropController.rotateRight(); _AspectRatioButton(
}, cropController: cropController,
aspectRatio: aspectRatio,
ratio: 16.0 / 9.0,
label: '16:9',
),
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: 3.0 / 2.0,
label: '3:2',
),
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: 7.0 / 5.0,
label: '7:5',
), ),
], ],
), ),
), ],
Row( ),
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: null,
label: 'Free',
),
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: 1.0,
label: '1:1',
),
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: 16.0 / 9.0,
label: '16:9',
),
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: 3.0 / 2.0,
label: '3:2',
),
_AspectRatioButton(
cropController: cropController,
aspectRatio: aspectRatio,
ratio: 7.0 / 5.0,
label: '7:5',
),
],
),
],
), ),
), ),
), ),
), ],
], );
); },
}, ),
), ),
); );
} }