[flutter] Card 위젯을 이용한 날씨 앱 화면 구성하기

12 Dec 2023

flutter

오늘은 Flutter를 사용하여 날씨 정보를 보여주는 앱의 화면을 만들어보려고 합니다. 이번 포스팅에서는 Card 위젯을 이용하여 각 도시의 날씨 정보를 표시하는 화면을 구성하는 방법에 대해 다루겠습니다.

1. 날씨 정보를 보여줄 Card 위젯 추가하기

먼저, 각 도시의 날씨 정보를 표시할 Card 위젯을 추가해야 합니다. 아래 예시 코드를 통해 간단히 Card 위젯을 추가하는 방법을 보여드리겠습니다.

import 'package:flutter/material.dart';

class WeatherCard extends StatelessWidget {
  final String cityName;
  final String temperature;

  WeatherCard({required this.cityName, required this.temperature});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: Icon(Icons.cloud),
        title: Text(cityName),
        subtitle: Text('Temperature: $temperature'),
      ),
    );
  }
}

여기서 WeatherCard는 각 도시의 날씨 정보를 보여주는 Card 위젯을 정의한 StatelessWidget입니다. cityName과 temperature는 해당 도시의 이름과 온도를 나타내는 데이터입니다.

2. 화면에 Card 위젯 배치하기

다음으로, 위에서 정의한 WeatherCard를 이용하여 화면에 실제로 Card 위젯을 배치하는 방법에 대해 살펴보겠습니다.

import 'package:flutter/material.dart';
import 'weather_card.dart';

void main() {
  runApp(MyWeatherApp());
}

class MyWeatherApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weather App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              WeatherCard(cityName: 'Seoul', temperature: '25°C'),
              WeatherCard(cityName: 'New York', temperature: '20°C'),
              WeatherCard(cityName: 'Tokyo', temperature: '28°C'),
            ],
          ),
        ),
      ),
    );
  }
}

위 예시 코드에서는 MyWeatherApp StatelessWidget 내부에서 각 도시의 날씨 정보를 보여주는 WeatherCard 위젯들을 Column을 이용하여 세로로 배치하고 있습니다.

결론

이렇게 하여 날씨 정보를 보여주는 간단한 화면을 Card 위젯을 이용하여 구성해보았습니다. Card 위젯을 사용하면 각각의 요소를 그룹화하여 시각적으로 나누고 강조할 수 있어서 UI를 보다 간편하게 구성할 수 있습니다.

더 많은 기능과 디자인을 추가하려면 추가적인 설정과 스타일링이 필요할 수 있습니다. 하지만 이번 예시를 통해 기본적인 Card 위젯의 사용 방법에 대해 익힐 수 있었기를 바랍니다.

참고 문서: Flutter - Card class