Flutter Styling

Flutter에서 스타일링은 애플리케이션의 UI 요소를 꾸미고, 사용자 경험을 개선하는 데 중요한 역할을 합니다. 스타일링을 통해 색상, 텍스트 스타일, 크기, 간격 등을 정의하고 적용할 수 있습니다. Flutter는 다양한 위젯과 도구를 제공하여 이러한 스타일링 작업을 효율적으로 수행할 수 있게 합니다.

주요 개념

1. Text Styling: 텍스트 스타일링은 TextStyle 클래스를 사용하여 텍스트의 색상, 크기, 폰트, 두께 등을 설정합니다.
2. Container Styling: Container 위젯은 박스 모델을 기반으로 한 스타일링을 제공하며, 여백, 패딩, 정렬, 배경색, 경계선 등을 설정할 수 있습니다.
3. Button Styling: 버튼 스타일링은 ElevatedButton, TextButton, OutlinedButton 등 버튼 위젯의 스타일을 정의합니다. 이를 위해 ButtonStyle 클래스를 사용합니다.
4. ThemeData: 애플리케이션 전체에 걸친 일관된 스타일을 정의하기 위해 ThemeData를 사용합니다. 이를 통해 색상, 텍스트 스타일, 버튼 스타일 등을 글로벌하게 설정할 수 있습니다.
5. Custom Widgets: 사용자 정의 위젯을 만들어 특정 스타일을 재사용할 수 있습니다.

Text Styling 예시

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('Text Styling Example'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 24,
              fontWeight: FontWeight.bold,
              letterSpacing: 2.0,
            ),
          ),
        ),
      ),
    );
  }
}

Container Styling 예시

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('Container Styling Example'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(16.0),
            margin: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(8.0),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 4.0,
                  spreadRadius: 2.0,
                ),
              ],
            ),
            child: Text(
              'Styled Container',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

Button Styling 예시

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('Button Styling Example'),
        ),
        body: Center(
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.red,
              onPrimary: Colors.white,
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
              textStyle: TextStyle(fontSize: 18),
            ),
            onPressed: () {},
            child: Text('Styled Button'),
          ),
        ),
      ),
    );
  }
}

Global Theme 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Example',
      theme: ThemeData(
        primarySwatch: Colors.green,
        textTheme: TextTheme(
          bodyText1: TextStyle(color: Colors.black, fontSize: 18),
          bodyText2: TextStyle(color: Colors.grey, fontSize: 16),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            onPrimary: Colors.white,
            textStyle: TextStyle(fontSize: 16),
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, Flutter!'),
            ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

결론

Flutter의 스타일링 기능을 사용하면 애플리케이션의 다양한 UI 요소를 일관되게 꾸밀 수 있습니다. 텍스트, 컨테이너, 버튼 등 다양한 위젯에 스타일을 적용할 수 있으며, ThemeData를 통해 글로벌 테마를 설정하여 애플리케이션 전체에 걸쳐 일관된 스타일을 유지할 수 있습니다. 또한, 사용자 정의 위젯을 통해 특정 스타일을 재사용할 수 있어 효율적인 개발이 가능합니다.