Flutter에서 테두리(Border) 효과 적용하기

Flutter는 다양한 위젯을 통해 UI 요소에 테두리(Border) 효과를 간단히 적용할 수 있습니다. 테두리는 UI 요소의 경계를 강조하고, 디자인을 세련되게 꾸미는 데 유용합니다. Flutter에서는 Container, BoxDecoration, Border, OutlinedButton 등 다양한 방법으로 테두리를 설정할 수 있습니다. 이번 글에서는 Flutter에서 테두리 효과를 적용하는 다양한 방법과 관련 예제를 소개합니다.

---

1. 기본 테두리 설정: BoxDecoration과 Border 사용

BoxDecoration은 Flutter에서 가장 널리 사용되는 테두리 설정 방법 중 하나입니다. Container 위젯과 함께 사용되며, BoxDecoration의 border 속성을 통해 테두리를 추가할 수 있습니다.

1.1 단순 테두리 예제

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('Border Example')),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                color: Colors.blue, // 테두리 색상
                width: 2,          // 테두리 두께
              ),
            ),
            child: Center(
              child: Text('Simple Border'),
            ),
          ),
        ),
      ),
    );
  }
}

 

주요 속성:

• color: 테두리 색상을 설정합니다.
• width: 테두리의 두께를 설정합니다.

 

 

반응형

 

---

2. 둥근 테두리 만들기: BorderRadius 사용

BoxDecoration의 BorderRadius 속성을 사용하면 둥근 테두리를 만들 수 있습니다. 이는 버튼, 카드, 프로필 사진 등의 UI에서 자주 사용됩니다.

2.1 둥근 테두리 예제

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.green, width: 3),
    borderRadius: BorderRadius.circular(15), // 둥근 테두리 반경
  ),
  child: Center(
    child: Text('Rounded Border'),
  ),
),

 

주요 속성:

• BorderRadius.circular(double): 모든 코너를 동일한 반경으로 둥글게 설정합니다.
• BorderRadius.only: 특정 코너만 둥글게 설정할 수 있습니다.

2.2 특정 코너만 둥글게 하기

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.purple, width: 2),
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
  ),
  child: Center(
    child: Text('Custom Rounded Corners'),
  ),
),

 

---

3. 다양한 테두리 스타일: BorderSide 사용

BorderSide 클래스를 활용하면 테두리의 스타일(선의 형태)을 세밀하게 조정할 수 있습니다. 특히 사방의 테두리를 개별적으로 설정할 때 유용합니다.

3.1 사방 테두리 설정 예제

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border(
      top: BorderSide(color: Colors.red, width: 4),
      left: BorderSide(color: Colors.blue, width: 4),
      right: BorderSide(color: Colors.green, width: 4),
      bottom: BorderSide(color: Colors.yellow, width: 4),
    ),
  ),
  child: Center(
    child: Text('Multi-Sided Border'),
  ),
),

 

주요 속성:

• BorderSide.color: 테두리의 색상.
• BorderSide.width: 테두리의 두께.
• BorderSide.style: 테두리의 스타일 (BorderStyle.solid 또는 BorderStyle.none).

---

4. 점선 테두리 만들기: flutter_dash 패키지 활용

Flutter 기본 BoxDecoration에서는 점선이나 대시 스타일 테두리를 직접 지원하지 않습니다. 그러나 flutter_dash 같은 패키지를 사용하면 간단히 구현할 수 있습니다.

4.1 점선 테두리 예제

dependencies:
  flutter_dash: ^2.0.0

 

import 'package:flutter/material.dart';
import 'package:flutter_dash/flutter_dash.dart';

class DashedBorderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dashed Border Example')),
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          child: Dash(
            direction: Axis.horizontal,
            length: 200,
            dashLength: 6,
            dashColor: Colors.orange,
          ),
        ),
      ),
    );
  }
}

 

주요 속성:

• direction: 점선 방향 (Axis.horizontal 또는 Axis.vertical).
• dashLength: 점선의 길이.
• dashColor: 점선의 색상.

 

728x90

 

---

5. 카드와 버튼에 테두리 적용

5.1 카드(Card) 위젯에 테두리 추가

Card 위젯은 기본적으로 그림자와 둥근 모서리를 포함하지만, 테두리를 추가하려면 shape 속성을 사용해야 합니다.

 

Card(
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.blue, width: 2),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text('Card with Border'),
  ),
),

 

---

5.2 OutlinedButton의 테두리 설정

OutlinedButton은 기본적으로 테두리를 가지며, 이를 커스터마이징할 수 있습니다.

 

OutlinedButton(
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: Colors.red, width: 2), // 테두리 색상 및 두께
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
    ),
  ),
  onPressed: () {},
  child: Text('Outlined Button'),
),

 

주요 속성:

• side: 테두리의 색상과 두께를 설정합니다.
• shape: 테두리 모양을 둥글게 설정합니다.

---

6. 이미지를 감싼 테두리

Flutter에서 이미지를 테두리와 함께 표시하려면 ClipRRect 또는 Container를 사용할 수 있습니다.

6.1 ClipRRect로 둥근 이미지와 테두리

ClipRRect(
  borderRadius: BorderRadius.circular(15),
  child: Container(
    padding: EdgeInsets.all(5), // 테두리 공간
    color: Colors.red,         // 테두리 색상
    child: Image.asset(
      'assets/sample.jpg',
      width: 200,
      height: 150,
      fit: BoxFit.cover,
    ),
  ),
),

 

---

7. Gradient Border (그라디언트 테두리)

Flutter 기본 BoxDecoration에서는 그라디언트 테두리를 직접 지원하지 않지만, ShaderMask를 사용하면 이를 구현할 수 있습니다.

7.1 그라디언트 테두리 예제

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(15),
  ),
  child: Center(
    child: ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.blue, Colors.purple],
      ).createShader(bounds),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.transparent, width: 2),
          borderRadius: BorderRadius.circular(15),
        ),
      ),
    ),
  ),
),

 

 

---

결론

Flutter에서 **테두리(Border)**를 설정하는 방법은 다양하며, 기본적인 BoxDecoration부터 OutlinedButton, Card, 그리고 패키지를 활용한 점선 및 그라디언트 테두리까지 자유롭게 구현할 수 있습니다. 이번 글의 예제를 바탕으로 Flutter 애플리케이션의 테두리 효과를 사용해 UI를 더욱 풍부하고 세련되게 만들어보세요!