[flutter] 플러터 Container에서 플렛폼 별 UI 기능을 사용하는 방법은 무엇인가요?

11 Dec 2023

flutter

먼저, decoratioin 속성을 사용하여 Container의 스타일을 설정합니다. 그런 다음, Platform 클래스를 사용하여 현재 플랫폼을 확인하고 조건부로 스타일을 적용합니다.

아래는 예시 코드입니다.

import 'package:flutter/material.dart';
import 'dart:io' show Platform;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: _getColorForPlatform(),
              borderRadius: _getBorderRadiusForPlatform(),
            ),
          ),
        ),
      ),
    );
  }

  Color _getColorForPlatform() {
    if (Platform.isAndroid) {
      return Colors.green;
    } else if (Platform.isIOS) {
      return Colors.blue;
    } else {
      return Colors.grey;
    }
  }

  BorderRadius _getBorderRadiusForPlatform() {
    if (Platform.isAndroid) {
      return BorderRadius.circular(30);
    } else if (Platform.isIOS) {
      return BorderRadius.circular(15);
    } else {
      return BorderRadius.circular(0);
    }
  }
}

이 코드를 실행하면 안드로이드와 iOS에서 각각 다른 배경색과 모서리 모양이 적용됩니다. 이와 같이 Platform 클래스를 활용하여 플랫폼 별 UI 기능을 쉽게 사용할 수 있습니다.