[flutter] Card 위젯을 이용한 산책로 안내 앱 화면 구성하기

12 Dec 2023

flutter

산책로 안내 앱은 사용자에게 주변 산책로 정보를 제공하고 안내하는 기능을 제공합니다. 이번에는 Flutter의 Card 위젯을 이용하여 산책로 안내 앱의 기본 화면을 구성하는 방법에 대해 살펴보겠습니다.

필요한 패키지 설치하기

먼저, pubspec.yaml 파일에 아래와 같은 패키지를 추가해줍니다.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.0.0

위와 같은 패키지를 추가한 후, 터미널에서 flutter pub get 명령어를 이용하여 패키지를 설치합니다.

Card 위젯을 이용한 산책로 정보 표시하기

Card 위젯은 정보를 담고 있는 사각형 영역을 만들어주는 위젯입니다. 우리는 Card 위젯을 사용하여 산책로의 정보를 표시할 것입니다. 코드에서는 산책로의 이미지, 이름, 설명을 Card 위젯으로 구성하여 화면에 표시합니다.

아래는 간단한 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('산책로 안내 앱'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Image.network(
                  'https://example.com/path-to-image.jpg',
                  width: 300,
                  height: 150,
                  fit: BoxFit.cover,
                ),
                ListTile(
                  title: Text('산책로 이름'),
                  subtitle: Text('산책로 설명'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 이미지는 cached_network_image 패키지를 통해 네트워크에서 불러오고 있습니다.

이제 이 화면을 보완하여 다양한 산책로 정보를 표시하고 사용자에게 제공할 수 있습니다.

이렇게 Flutter의 Card 위젯을 이용하여 간단하게 산책로 안내 앱 화면을 구성하는 방법을 살펴보았습니다.

이 글은 Flutter 공식 문서 및 pub.dev에서 확인할 수 있는 자료를 참고하여 작성되었습니다.