[9주 완성 프로젝트 캠프 : 플러터(유데미x스나이퍼팩토리)] 1일차 과제

요구사항

1일차 과제
제공된 예문을 사용해 예시와 동일한 결과물 만들기

예시

• RichText 위젯 사용
• Text, Column 위젯 사용불가
• style을 지정한 위젯은 4가지 이상
• 문단은 3문단 이상

 

그럼 내가 해야 하는 건?

• RichText 문법 알아보기
• RichText와 Center 같이 쓴 예시 찾아보기
• 글자 색 지정/글자 크기 지정/취소선/볼드체/배경 색 지정 관련 Style 알아보기

 

 

사전 지식

"RichText"

• RichText는 위 사진과 같이 트리 구조로 이루어져 있다.
• 여러 스타일을 혼합해 표현할 때 사용하는 위젯이다.
• Center로 배치하고 싶다면, body를 Center로 설정하고, children으로 RichText 위젯을 사용한다.

 

적용한 Style

• textAlign: TextAlign.center - 텍스트를 중앙 정렬
• style: TextStyle() - 텍스트의 스타일 지정
• color: Colors.컬러명 - 색 지정
• fontSize: 사이즈값 - 사이즈 지정
• backgroundColor: Color.fromARGB(색상값, 색상값, 색상값, 색상값) - 배경색 지정, 색 지정과 같은 형식으로도 가능
• fontWeight: FontWeight.bold - 볼드체로 변환, 옵션에 따라 기본 값(normal) 등 다양하게 설정 가능
• decoration: TextDecoration.lineThrough - 취소선, 옵션에 따라 밑줄 등 다양하게 설정 가능
• decorationColor: Colors.컬러명 - 데코레이션의 색상 지정

 

const 관련으로 파란 줄이 뜬다면?

analysis_options.yaml을 수정해 준다.

linter:  
  rules:    
    prefer_const_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false

 

 

코드 작성

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color.fromARGB(255, 255, 250, 252),
        body: Center(
          child: RichText(
            text: TextSpan(
              text: '안녕하세요!\n간단하게 제 ',
              style: TextStyle(fontWeight: FontWeight.bold),
              children: <TextSpan>[
                TextSpan(
                  text: '소개',
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 24,
                  ),
                ),
                TextSpan(text: '를 해보겠습니다\n\n\n먼저 저의 MBTI는 '),
                TextSpan(
                  text: 'INFJ',
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 24,
                  ),
                ),
                TextSpan(text: '이고\n직업은 '),
                TextSpan(
                  text: '개발자',
                  style: TextStyle(
                    color: Colors.green,
                    fontSize: 24,
                  ),
                ),
                TextSpan(text: '입니다.\n\n\n'),
                TextSpan(
                  text: '꿈',
                  style: TextStyle(
                    color: Colors.orange,
                    decoration: TextDecoration.lineThrough, //취소선
                    decorationColor: Colors.black,
                  ),
                ),
                TextSpan(
                  text: '은 없고요\n그냥 놀고 싶습니다\n\n\n',
                  style: TextStyle(
                    decoration: TextDecoration.lineThrough, //취소선
                    decorationColor: Colors.black,
                    fontWeight: FontWeight.normal,
                  ),
                ),
                TextSpan(
                  text: '감사합니다',
                  style: TextStyle(
                    color: Colors.purple,
                    fontSize: 24,
                  ),
                ),
              ],
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

 

 

 

 

 

결과

 

 

 

 

회고

기존에 접해본 언어와 비슷하면서도 다른 부분이 있어서 헷갈렸다.

개념 확실히 잡고 가야 할 듯.

 

그리고 다 만든 줄 알고 확인했는데, 예시 화면이랑 달라서 멈칫했음.

요구사항 파악도 꼼꼼히 해야 할 듯 하다.

 

과제와 강의 정리를 나눠서 포스팅하고 싶은데, 과연 가능할지...!

9주 후에는 많이 성장한 모습이었으면 좋겠다.

 

 

참고 자료

• https://eunjin3786.tistory.com/421
• https://sunnybong.tistory.com/311
• https://velog.io/@tmdgks2222/Flutter-EasyRichText
• https://in4blog.tistory.com/entry/%ED%94%8C%EB%9F%AC%ED%84%B0-%EA%B8%88%EC%A3%BC%EC%9D%98-%EC%9C%84%EC%A0%AF-RichText
• https://blog.naver.com/axlovelee/222693376768

 

 

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

 

#유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #웹개발 #앱개발 #플러터 #flutter #개발 #안드로이드 #ios #단기캠프