인프런 커뮤니티 질문&답변

YOUNGJAE KIM님의 프로필 이미지
YOUNGJAE KIM

작성한 질문수

[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

실습

가운데정렬 이안되여

작성

·

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),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서 mainAxisAlignmentcrossAxisAlignmentMainAxisAlignment.center로 수정하고, 필요한 곳에 Row를 추가하였습니다. 그리고 keyKey? key로 수정해주시면 됩니다.

수정한 코드를 실행해보시고 정렬이 제대로 되는지 확인해보세요. 추가적인 질문이 있으시면 언제든지 물어보세요. 좋은 하루 보내세요!

YOUNGJAE KIM님의 프로필 이미지
YOUNGJAE KIM

작성한 질문수

질문하기