본문 바로가기

Programming/Flutter

Flutter 시작하기 2 일차 : splash screen 정렬하기

반응형

우선 색상코드를 바꿔줍니다.

color: Colors.orange, -->  color: Color(0xFFF99231),

 

Center위젯을 Colum위젯으로 바꾸고, CircularProgressIndicator 반영하기

이미지를 높이방향으로 가운데 정렬하기

이미지의 사이즈를 200px로 줄이고 가운데 정렬하기

프로그레스 이미지를 흰색으로 변경하기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Color(0xFFF99231),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/logo.png',
                    width: 200,
                  ),
                  CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(
                      Colors.white,
                    )
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

반응형