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

05 Dec 2023

flutter

안녕하세요! 오늘은 플러터(Flutter)를 이용하여 앱에서 사용되는 알림 디자인을 만드는 방법에 대해 알려드리겠습니다.

플러터에서 ClipRRect 위젯을 사용하여 알림 디자인을 만들 수 있습니다. 이 위젯은 특정 위젯의 경계를 둥글게 만들어줍니다.

아래는 클리퍼를 이용한 플러터 앱 알림 디자인 예제 코드입니다.

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Notifier App'),
      ),
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                '새로운 알림이 도착했습니다!',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 ClipRRect 위젯을 사용하여 알림 디자인을 만들었습니다. ClipRRect 위젯은 borderRadius 속성을 사용하여 특정 위젯의 경계를 둥글게 만듭니다.

알림 디자인을 만들기 위해 ClipRRect 위젯을 감싼 Container 위젯을 사용하였습니다. Container 위젯을 사용하여 크기와 색상을 설정하였습니다. 그리고 Center 위젯을 사용하여 텍스트를 중앙 정렬하였습니다.

이 코드를 실행하면 알림 디자인을 가진 플러터 앱이 나타납니다.

이 예제를 통해 플러터에서 알림 디자인을 만드는 방법을 알 수 있습니다.

더 많은 정보를 알고 싶으시다면 플러터 공식 문서를 확인해보세요.