Flutter how to place a widget relative to another widget on screen? - flutter

Question

I want to place a paint board widget at the center of the screen and a clear button that sits top right above the paint board. I have tried column with MainAxisAlignment.center but it centers base on the board and clear button so the board is not absolutely at the center. How can I achieve this effect?

Answer 1

You can use positioned with stack and place where ever you want. copy and try this code in dartpad.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: 100,
child: Container(
width: MediaQuery.of(context).size.width,
height: 250, color: Colors.yellow)),
Positioned(
top: 60,
right: 20,
child: Icon(Icons.close, size: 32)),
]
);
}
}

Answer 2

Here is a similar UI with a Column widget, you can add a SizedBox below the yellow box inside the Column with the same height as the Icon, so that the yellow box appears to be centred.
So, we can avoid hardcoded values inside thr Positioned widget (that impacts responsive UI)
Here is the code snippet.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
double iconSize = 32;
return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
alignment: Alignment.centerRight,
height: iconSize,
child: Icon(Icons.close, size: iconSize),
),
Container(
width: MediaQuery.of(context).size.width,
height: 250,
color: Colors.yellow,
),
SizedBox(height: iconSize)
]);
}
}