[Flutter] 코드정리(코드가 지저분한 것을 인지하자)

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 30.0,
      fontWeight: FontWeight.w300
    );

    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF2A3A7C),
              Color(0xFF000118),
            ]
          )
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
                'asset/image/logo.png'
            ),
            SizedBox(height: 30.0), // 공간을 주고 싶을 때는 패딩도 좋지만 패딩은 한번 감싸야되니까 SizedBox를 써도 된다
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                    'VIDEO',
                  style: textStyle,
                ),
                Text(
                    'PLAYER',
                  style: textStyle.copyWith(
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

위 코드에서

 

1. BoxDecoration부분과

 

2. Column내 Image.aseet, SizedBox,Row 이 부분이 지저분 한 것을 깨달아야 한다!!!!!!!!!!!!!!!!!!

 

 

 

1. BoxDecoration부분을 함수로 만들기

 

(a) 리턴값 설정

(b) 함수 이름은 getOOO으로 알아서

(c) 복붙

 

BoxDecoration getBoxDecoration() {
  return BoxDecoration(
      gradient: LinearGradient(
          begin: Alignment.,
          end: Alignment.bottomCenter,
          colors: [
            Color(0xFF2A3A7C),
            Color(0xFF000118),
          ]
      )
  );
}

 

 

2. Column내 Image.aseet, SizedBox,Row

 

(a) stlessWidget으로 _logo

(b) return 이후로 복붙

 

(c) SizedBox는 두자 한줄이니까

 

(d) 마찬가지로 stlessWidget으로 _AppName으로 변경

(e) return 이후로 복붙

(f) textStyle이 HomeScreen build에 있었기 때문에, 에러가 나므로 _AppName build에 복붙

 

 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        decoration: getBoxDecoration(),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _Logo(),
            SizedBox(height: 30.0), // 공간을 주고 싶을 때는 패딩도 좋지만 패딩은 한번 감싸야되니까 SizedBox를 써도 된다
        _AppName(),
          ],
        ),
      ),
    );
  }
}

BoxDecoration getBoxDecoration() {
  return BoxDecoration(
      gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color(0xFF2A3A7C),
            Color(0xFF000118),
          ]
      )
  );
}

class _Logo extends StatelessWidget {
  const _Logo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Image.asset(
        'asset/image/logo.png'
    );
  }
}

class _AppName extends StatelessWidget {
  const _AppName({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    final textStyle = TextStyle(
        color: Colors.white,
        fontSize: 30.0,
        fontWeight: FontWeight.w300
    );

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'VIDEO',
          style: textStyle,
        ),
        Text(
          'PLAYER',
          style: textStyle.copyWith(
            fontWeight: FontWeight.w700,
          ),
        ),
      ],
    );
  }
}

 

 

요딴식으로 코드 정리