[flutter] 플러터 스택드 위젯에서 일기 예보 앱 개발하는 방법

15 Dec 2023

flutter

소개

이번 포스트에서는 플러터(Flutter)를 사용하여 스택(Stack) 위젯을 활용하여 일기 예보 앱을 개발하는 방법을 살펴보겠습니다.

1. 스택(Stack) 위젯

스택(Stack)은 위젯을 겹쳐서 쌓을 수 있는데, 가장 위에 있는 위젯이 화면에 가장 먼저 그려지고, 가장 아래에 있는 위젯이 가장 마지막에 그려집니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Container(color: Colors.blue),
            Container(color: Colors.green, margin: EdgeInsets.all(50.0),
            Container(color: Colors.red, margin: EdgeInsets.all(100.0),
          ],
        ),
      ),
    );
  }
}

2. 일기 예보 앱 개발하기

위젯을 쌓는 방식을 이용하여 일기 예보 앱의 UI를 개발할 수 있습니다. 예를 들어, 배경 이미지 위에 도시 이름과 현재 날씨 정보를 나타내는 텍스트 위젯을 쌓을 수 있습니다.

Stack(
  children: <Widget>[
    Image.asset('assets/background_image.jpg', fit: BoxFit.cover),
    Positioned(
      top: 16.0,
      left: 16.0,
      child: Text('서울', style: TextStyle(color: Colors.white, fontSize: 24.0)),
    ),
    Positioned(
      bottom: 16.0,
      right: 16.0,
      child: Text('맑음', style: TextStyle(color: Colors.white, fontSize: 24.0)),
    ),
  ],
)

결론

플러터(Flutter)의 스택(Stack) 위젯을 이용하면 간단하게 일기 예보 앱과 같은 복잡한 UI를 개발할 수 있습니다. 위젯을 겹쳐서 배치하는 방식을 이해하고 활용하여 다양한 앱을 개발해 보시기 바랍니다.

더 많은 자료는 Flutter 공식 문서에서 확인하실 수 있습니다.