[flutter] superellipse 모양을 활용한 플러터 앱의 테마 설정하기

15 Dec 2023

flutter

플러터(Flutter)는 아름다운 모바일 앱을 만들 수 있는 강력한 프레임워크입니다. 플러터를 사용하면 앱의 테마를 변경하여 사용자 경험을 향상시킬 수 있습니다. 이번에는 superellipse 모양을 활용하여 플러터 앱의 테마를 설정하는 방법에 대해 알아보겠습니다.

1. Superellipse 모양이란 무엇인가요?

Superellipse는 또 다른 이름으로 램프라이트 곡선으로 알려진 수학적인 곡선입니다. 사각형을 원과 유사한 둥근 모양으로 만들어줍니다. 이를 활용하여 앱의 UI 요소들을 더 아름답게 만들 수 있습니다.

2. Superellipse를 사용하여 Flutter 앱의 테마 설정하기

플러터에서는 ThemeData 클래스를 사용하여 앱의 테마를 설정합니다. superellipse 모양을 적용하기 위해서는 Decoration을 사용할 수 있습니다. 아래는 superellipse 모양을 적용한 플러터 앱의 테마 설정 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        buttonTheme: ButtonThemeData(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(20.0)),
              ),
            ),
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Superellipse 테마 설정 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Superellipse 버튼'),
        ),
      ),
    );
  }
}

위 예제에서는 ButtonThemeData 및 ElevatedButtonThemeData를 사용하여 superellipse 모양을 적용했습니다.

3. 결론

플러터를 사용하여 앱의 테마를 설정할 때 superellipse 모양을 활용하여 UI 요소들을 더욱 독창적으로 만들 수 있습니다. 이를 통해 사용자들에게 더 좋은 시각적 경험을 제공할 수 있습니다. superellipse를 활용하여 여러분의 다음 플러터 프로젝트를 더욱 흥미롭게 만들어보세요!

참고문헌:

Flutter 문서. https://flutter.dev/docs