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

작성한 질문수

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

가운데정렬 이안되여

작성

397

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

flutter 클론코딩

답변 2

코드팩토리

지식공유자

안녕하세요!

어떤 부분을 가온데 정렬 하고싶은건지 정확히 말씀 주시면 다시 답변 드리겠습니다.

감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 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로 수정해주시면 됩니다.

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

YOUNGJAE KIM

작성한 질문수

전체 Q&A

질문하기