Flutter 기본-13. 날씨 앱 만들기 기본3, UI 구성 실습

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

 

 

---

 

1. appBar, 위치 및 시간 관련 라이브러리들

 

appBar

 

Scaffold/appBar에 leading, actions 속성으로 각 아이콘을 설정해준다. 여기서 extendBodyBehindAppBar 속성을 적용하면 이름 그대로 Body부분이 appBar까지 확장된다. 이후 AppBar를 transparent, elevation: 0.0으로 주면 appBar와 body간 경계가 없는 것처럼 일체화된 background를 구성할 수 있다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.orangeAccent,
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0.0,
      leading: IconButton(
        icon: Icon(Icons.near_me),
        onPressed: () {},
        iconSize: 30.0,
      ),
      actions: [
        IconButton(
          icon: Icon(
            Icons.location_searching,
          ),
          onPressed: () {},
          iconSize: 30.0,
        )
      ],
    ),

 

 

Body: 라이브러리들 적용

 

이제 body 부분에 위치값과 날짜 및 시간 정보를 넣어준다.

 

구성

위 캡쳐 사진에서 볼 수 있듯이 Container/Stack/Column/Row 구조로 구성한다.

• 기본적으로 가장 바깥의 위젯을 Container로 설정해서 body 바깥쪽 padding 같은 속성을 활용할 수 있도록 해준다. Container는 크기를 조절할 수 있는 인자가 다양하게 제공되기 때문이다.
• Stack 속성을 이용해서 Stack위에 Column을 여러 개 쌓을 것이다. 여기서는 일단 Column 1개만 작성한다.

body: Container(
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Stack(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 180.0,
            ),
            Text('$cityName',
              style: GoogleFonts.lato(
                  fontSize: 35.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white
              ),
            ),
            Row(
              children: [
                TimerBuilder.periodic(
                    Duration(minutes: 1), builder: (context) {
                  print('${getSystemTime()}');
                  return Text(
                    '${getSystemTime()}',
                    style: GoogleFonts.lato(
                        fontSize: 16.0,
                        color: Colors.white
                    ),
                  );
                }),
                Text(
                  DateFormat(' - EEEE, ').format(date),
                  style: GoogleFonts.lato(
                      fontSize: 16.0,
                      color: Colors.white
                  ),
                ),
                Text(
                  DateFormat('d MMM, yyy').format(date),
                  style: GoogleFonts.lato(
                      fontSize: 16.0,
                      color: Colors.white
                  ),
                ),
                ]... 중략

 

lib: google_fonts

https://pub.dev/packages/google_fonts

google_fonts 라이브러리는 Text의 style에 GoogleFonts. 형태로 사용한다.

 

lib: timer_builder

https://pub.dev/packages/timer_builder

날짜와 시간을 편하게 사용할 수 있도록 해주는 라이브러리다.

TimerBuilder.periodic(Duration, builder: (context) => method)

위 문법대로 사용하였고, Duration을 minutes 단위로 주어 분 단위로 builder 메서드가 실행되게 하였다. builder 메서드로 적용한 getSystemTime 메서드의 datetime 객체는 timer_builder가 아니라 dart:core에 포함된 기본 날짜 및 시간 객체이다.

 

lib: intl

https://pub.dev/packages/intl

intl은 internalization + localization을 해주는 라이브러리인데, 여기서는 DateFormat을 활용하기 위해서 사용했다. DateFormat({포맷타입}) 형태로 사용하며 포맷 타입의 'EEEE' 는 요일, 'h:mm a'는 시간, 분 및 오전/오후를 표시한다. 그리고 'd MMM, yyy'는 일, 월, 연도를 표시한다.

 

 

 

2. 전체 Column 구성, Svg 삽입

Column 종속 관계

이제 위 그림과 같이 Column 종속 관계를 만든다. 즉 기존에 도시 이름, 날짜 및 시간이 표시되던 Column 부분을 Column 하나로 Wrapping해서 하나의 큰 Column을 만든다. 그리고 아래에 온도 및 날씨, 대기질 정보를 표현할 수 있는 Column을 자식으로 구성할 것이다. 또한 각 정보는 가로로 배치되므로 파란색 사각형으로 표시된 것처럼 Row 자식을 갖게할 것이다.

 

 

Stack 아래 Column이 있고, 위에서 이미 작성한 위치 및 날짜 Column은 제외한 코드이다. 일단 들어가는 데이터들은 연동해오는 데이터와 상관없이 고정된 값이나 이미지로 넣어놓고 실제 데이터는 나중에 바꿀 것이다. 지금은 UI에만 집중한다.

	Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '18˚C',
              style: GoogleFonts.lato(
                  fontSize: 80.0, color: Colors.white),
            ),
            Row(
              children: [
                SvgPicture.asset('svg/climacon-sun.svg'),
                Text(
                  'clear sky',
                  style: GoogleFonts.lato(
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ],
            )
          ],
        ),
        Column(
          children: [
            Divider(
              height: 1.0,
              thickness: 1.0,
              color: Colors.white,
            ),
            SizedBox(
              height: 20.0,
            ),
            Row(
              children: [
                Column(
                  children: [
                    Text(
                      'AQI(대기질지수)',
                      style: GoogleFonts.lato(
                          fontSize: 12.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Image.asset(
                        'images/bad.png',
                        width: 37.0,
                        height: 35.0,
                      ),
                    ),
                    Text(
                      '매우나쁨',
                      style: GoogleFonts.lato(
                          fontSize: 12.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                    ),
                  ],
                ),
              ],
            )
          ],
        )
      ],
    ),
  ],
),

 

 

lib: flutter_svg

https://pub.dev/packages/flutter_svg

 

flutter_svg 라이브러리를 추가하여 SvgPicture.asset으로 svg 파일을 넣어준다. 온도 표현은 강의에서처럼 '18\u2103'으로 유니코드 형태로 넣으면 될 것 같다. mac에서는 작동하지 않아서 [option+shift+8] 버튼으로 °(degree)를 입력 후 C를 붙여주었다.


나머지 부분들은 column, alignment 등 앞서 배운 부분들이다. 알맞게 잘 구성하여 화면을 완성하면 된다.

image 및 svg 파일은 코딩 셰프님의 깃허브에서 찾을 수 있다.

https://github.com/icodingchef/weather_app_ex1