[Flutter] Container 테두리 그리기

전체 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HOME')),
      body: Center(


        ///여기부터 Container 테두리 예시코드 
        ///
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 1),
              ),
            ), // all: 모든 테두리

            SizedBox(height: 50),

            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(color: Colors.black, width: 1),
                  // right: BorderSide(color: Colors.black, width: 1),
                  top: BorderSide(color: Colors.black, width: 1),
                  bottom: BorderSide(color: Colors.black, width: 1),
                ),
              ),
            ), // BorderSide: 지정 테두리 -- 좌, 우, 상, 하 지정하여 각각 그리기

            SizedBox(height: 50),

            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                border: Border.symmetric(
                  horizontal: BorderSide(color: Colors.black, width: 1),
                ),
              ),
            ), // symmetric: 상하 또는 좌우 테두리 -- 좌우 테두리

            SizedBox(height: 50),

            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                border: Border.symmetric(
                  vertical: BorderSide(color: Colors.black, width: 1),
                ),
              ),
            ), // symmetric: 상하 또는 좌우 테두리 -- 상하 테두리
          ],
        ),
      ),
    );
  }
}

 

결과물

 

 

 

전체 테두리

Border.all(color: {색상} , width: {테두리 두께} )

 

 

지정 테두리

Border(
	left: BorderSide(color: {색상} , width: {테두리 두께} ),   // 왼쪽 테두리
    right: BorderSide(color: {색상} , width: {테두리 두께} ),  // 오른쪽 테두리
    top: BorderSide(color: {색상} , width: {테두리 두께} ),    // 상단 테두리
    bottom: BorderSide(color: {색상} , width: {테두리 두께} ), // 하단 테두리
)​

 

상하 / 좌우 테두리

Border.symmetric(
	horizontal: BorderSide(color: Colors.black, width: 1),
),
// horizontal 이면 좌우, vertical 이면 상하