Flutter UI 디자인을 위한 Flutter 위젯과 속성 알아보기

1. Container 사용 예시

Container는 Flutter에서 가장 많이 사용되는 위젯 중 하나로, 다양한 속성을 설정하여 디자인을 꾸밀 수 있습니다.

Container(
  padding: EdgeInsets.all(16.0), // 내부 여백
  margin: EdgeInsets.symmetric(horizontal: 20.0), // 외부 여백
  decoration: BoxDecoration(
    color: Colors.white, // 배경 색상
    borderRadius: BorderRadius.circular(10.0), // 모서리를 둥글게 처리
    boxShadow: [ // 그림자 효과
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // 그림자의 위치 조정
      ),
    ],
  ),
  child: Text(
    'Styled Container',
    style: TextStyle(fontSize: 18.0),
  ),
);

2. Text 위젯 스타일링

텍스트의 스타일을 변경하여 다양한 디자인을 할 수 있습니다.

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24.0, // 글자 크기
    fontWeight: FontWeight.bold, // 글자 굵기
    color: Colors.blue, // 글자 색상
    letterSpacing: 2.0, // 글자 간격
    shadows: [ // 텍스트 그림자
      Shadow(
        offset: Offset(2.0, 2.0),
        blurRadius: 3.0,
        color: Colors.black.withOpacity(0.5),
      ),
    ],
  ),
  textAlign: TextAlign.center, // 텍스트 정렬
);

3. Row와 Column 위젯

화면 요소를 수평 또는 수직으로 배치할 때 사용합니다.

// Column 예시: 위젯들을 수직으로 배치
Column(
  mainAxisAlignment: MainAxisAlignment.center, // 세로 방향으로 정렬
  crossAxisAlignment: CrossAxisAlignment.center, // 가로 방향으로 정렬
  children: <Widget>[
    Text('First line'),
    SizedBox(height: 10), // 두 위젯 사이에 간격 추가
    Text('Second line'),
  ],
);

// Row 예시: 위젯들을 수평으로 배치
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround, // 수평 방향으로 정렬
  children: <Widget>[
    Icon(Icons.home, size: 40.0),
    Icon(Icons.search, size: 40.0),
    Icon(Icons.settings, size: 40.0),
  ],
);

4. Stack 위젯

위젯을 겹쳐서 배치할 때 사용합니다.

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Text(
        'Overlay Text',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ],
);

5. ListView와 GridView

스크롤 가능한 리스트나 그리드를 생성할 때 사용합니다.

// ListView 예시: 스크롤 가능한 리스트
ListView(
  padding: EdgeInsets.all(8.0),
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
);

// GridView 예시: 격자형 레이아웃
GridView.count(
  crossAxisCount: 2, // 열의 개수
  crossAxisSpacing: 10.0, // 열 사이의 간격
  mainAxisSpacing: 10.0, // 행 사이의 간격
  padding: EdgeInsets.all(8.0),
  children: List.generate(4, (index) {
    return Container(
      color: Colors.teal[(index + 1) * 200],
      child: Center(
        child: Text('Item $index', style: TextStyle(fontSize: 20)),
      ),
    );
  }),
);

6. Card 위젯

카드 스타일의 UI를 생성할 때 사용합니다.

Card(
  elevation: 4.0, // 그림자 효과
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: ListTile(
    leading: Icon(Icons.album),
    title: Text('Card Title'),
    subtitle: Text('Card Subtitle'),
  ),
);

7. AnimatedContainer를 활용한 애니메이션

속성이 변경될 때 부드러운 애니메이션 효과를 적용할 수 있습니다.

AnimatedContainer(
  duration: Duration(seconds: 1), // 애니메이션 지속 시간
  width: _isTapped ? 200.0 : 100.0,
  height: _isTapped ? 200.0 : 100.0,
  color: _isTapped ? Colors.blue : Colors.red,
  child: Center(child: Text('Tap me!')),
);

8. Opacity 위젯

위젯의 투명도를 조절할 수 있습니다.

Opacity(
  opacity: 0.5, // 투명도 설정 (0.0 - 1.0)
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(child: Text('Half Transparent')),
  ),
);

9. 반응형 UI

화면 크기에 따라 UI 요소의 크기나 배치를 유동적으로 변경할 수 있습니다.

// MediaQuery로 화면 크기에 따른 반응형 UI
Widget build(BuildContext context) {
  double screenWidth = MediaQuery.of(context).size.width;

  return Container(
    width: screenWidth * 0.8, // 화면 너비의 80% 사용
    height: 200,
    color: Colors.blue,
    child: Center(child: Text('Responsive Container')),
  );
}

10. Flutter 테마 적용

앱 전체에 일관된 스타일을 적용할 수 있습니다.

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    accentColor: Colors.orange,
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18.0, fontFamily: 'Hind'),
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text('Themed App')),
    body: Center(child: Text('Hello Flutter!')),
  ),
);

11. 그 외 유용한 위젯들

SizedBox

위젯 사이에 간격을 추가할 때 사용합니다.

SizedBox(height: 20.0), // 세로 방향으로 20의 간격 추가

Divider

위젯 사이에 구분선을 추가할 때 사용합니다.

Divider(
  color: Colors.grey,
  thickness: 1.0,
);

Hero 위젯

화면 전환 시 애니메이션을 통해 위젯의 이동을 부드럽게 보여줍니다.

Hero(
  tag: 'hero-tag',
  child: Image.asset('assets/logo.png'),
);