您可以找到应用程序运行的屏幕的高度和宽度,然后指定顶部、左侧、高度和宽度的相对位置。下面的代码演示了 MediaQuery.of(context).size 的使用,您可以使用它来查找屏幕的宽度和高度。
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) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
double side = height * 0.10;
return Stack(
children: [
Positioned(
top: height * 0.10,
left: width * 0.10,
child: Container(height: side, width: side, color: Colors.red),
),
Positioned(
top: height * 0.10,
left: width * 0.70,
child: Container(height: side, width: side, color: Colors.green),
),
Positioned(
top: height * 0.70,
left: width * 0.70,
child: Container(height: side, width: side, color: Colors.red),
),
Positioned(
top: height * 0.70,
left: width * 0.10,
child: Container(height: side, width: side, color: Colors.green),
),
],
);
}
}