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

안녕하세요 Namwoong Kim님

문의 주신 Splash 레이아웃 샘플을 👉 DartPad 링크에서 확인하실 수 있습니다.

스크린의 폭과 높이는 기기에 따라 다르기 때문에 위 샘플에선 로고 이미지를 기기 높이의 24% 위치에 배치하도록 구현하였습니다.

전체 코드도 함께 올려드립니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    /// 스크린 크기
    final Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        /// Stack이 width를 가득 채우도록 만들기
        width: double.infinity,

        /// 배경 색상
        color: Colors.black,
        child: Stack(
          children: [
            Positioned(
              top: screenSize.height * 0.24, // 기기 크기의 24% 위치에 배치
              left: 0,
              right: 0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  /// Image
                  Container(
                    width: screenSize.width * 0.8,
                    height: screenSize.height * 0.25,
                    alignment: Alignment.center,
                    color: Colors.amber,
                    child: const Text(
                      'img',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  const SizedBox(height: 16),

                  /// App Name
                  const Text(
                    'app name',
                    style: TextStyle(
                      fontSize: 32,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),

            /// Company Name
            const Positioned(
              bottom: 16,
              left: 0,
              right: 0,
              child: Center(
                child: Text(
                  "company name",
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

감사합니다 :)