[flutter] 클리퍼를 이용한 플러터 앱 카드 디자인 예제

05 Dec 2023

flutter

안녕하세요! 오늘은 클리퍼를 이용하여 플러터 앱에서 카드 디자인을 구현하는 예제를 소개하려고 합니다. 클리퍼는 그림자 효과를 주는데 사용되며, 앱에 깔끔하고 세련된 외관을 부여해줍니다.

코드 예제

먼저, 앱의 main.dart 파일에 다음 코드를 추가합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Design Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Card Design Example'),
      ),
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16.0),
          child: Card(
            elevation: 4.0,
            child: Container(
              width: 300,
              height: 200,
              padding: EdgeInsets.all(16.0),
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드는 HomePage 위젯에서 ClipRRect를 이용하여 카드를 그리고, Card 위젯을 이용하여 그림자 효과를 줍니다. 카드의 외관을 깔끔하고 세련되게 만들기 위해 ClipRRect 위젯을 사용합니다.

결과

앱을 실행하면 다음과 같이 카드 모양의 디자인이 구현된 화면을 볼 수 있습니다.

Card Design Example

결론

이렇게 클리퍼를 이용하여 플러터 앱에서 카드 디자인을 구현하는 방법을 살펴보았습니다. 클리퍼를 사용하면 앱의 외관을 개선하고 깔끔하게 만들 수 있으므로, 어떤 앱이든지 적용해볼 만한 가치가 있습니다.

참고 자료: