[Flutter] Text 테두리 그리기

Text에 밑줄 친 효과를 넣어 보려고 한다.

bottomBorder이 들어간 Container 안에 Text를 넣어주면 된다.

 

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:new Scaffold(
          appBar: AppBar(title: Text('Test'),),
          body: Container(
            decoration: BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.black)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('텍스트 border 테스트입니다.', style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: Colors.black),),
              ],
            )
          ),
        ),
    );
  }
}

 

 

BoxDecoration을 넣어주면

<결과>

 

Border값은 위,아래,양쪽 다 줄 수 있는데 그땐 top, bottom, left, right 다 따로 지정할 수도 있고

 

Border.all로 전체에 테두리 효과를 줄 수 있다.

 

decoration: BoxDecoration(
              border: Border.all(color: Colors.black),
            ),

 

 

 

<결과>