작성
·
348
0
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
bottom: false,
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.orange, width: 50, height: 50),
Container(color: Colors.yellow, width: 50, height: 50),
Container(color: Colors.green, width: 50, height: 50),
],
),
Row(
children: [
Container(color: Colors.orange, width: 50, height: 50),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.orange, width: 50, height: 50),
Container(color: Colors.yellow, width: 50, height: 50),
Container(color: Colors.green, width: 50, height: 50),
],
),
Row(children: [
Container(color: Colors.green, width: 50, height: 50),
],),
],
),
),
),
);
}
}
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다.
다음과 같이 코드를 수정하시면 가운데 정렬이 가능해집니다.
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
bottom: false,
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.orange, width: 50, height: 50),
Container(color: Colors.yellow, width: 50, height: 50),
Container(color: Colors.green, width: 50, height: 50),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(color: Colors.orange, width: 50, height: 50),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.orange, width: 50, height: 50),
],
),
],
),
),
),
);
}
}
위의 코드에서 mainAxisAlignment
과 crossAxisAlignment
를 MainAxisAlignment.center
로 수정하고, 필요한 곳에 Row
를 추가하였습니다. 그리고 key
를 Key? key
로 수정해주시면 됩니다.
수정한 코드를 실행해보시고 정렬이 제대로 되는지 확인해보세요. 추가적인 질문이 있으시면 언제든지 물어보세요. 좋은 하루 보내세요!