본문 바로가기

전체목록67

[flutter 3.0] 플러터 버튼 종류 4가지 플러터의 버튼 종류 4가지를 알아보겠습니다. 모두 자주 사용하는 버튼이므로 잘 알아두시기 바랍니다. ▣ TextButton 테두리나 배경 없이 글자로만 구성된 버튼입니다. TextButton( onPressed: () {}, child: Text('즐겨찾기'), ), ▣ ElevatedButton 배경이 있는 버튼입니다. 플러터에서 가장 많이 사용하는 버튼입니다. ElevatedButton( onPressed: () {}, child: Text('즐겨찾기'), ), ▣ OutlinedButton 테두리가 있는 버튼입니다. OutlinedButton( onPressed: () {}, child: Text('즐겨찾기'), ), ▣ FloatingActionButton 일반적으로 우측 하단에 자주 보이는 버튼.. 2022. 12. 9.
[flutter] 플러터 ElevatedButton border radius 둥글게 만들기 ElevatedButton 버튼의 모양을 둥글게 만드는 방법을 알아보겠습니다. 파란색으로 만든 버튼이 기본 버튼이고 빨간색으로 만든 버튼이 border radius를 주어 둥글게 만든 ElevatedButton입니다. ▣ 기본 ElevatedButton 먼저 기본 ElevatedButton을 만들기입니다. ElevatedButton( onPressed: () { }, child: Text('다음페이지'), ), ▣ ElevatedButton borderradius BorderRadius.circular의 인자 값을 이용해 ElevatedButton을 둥글게 만들 수 있습니다. 아래는 ElevatedButton을 둥글게 만드는 코드입니다. 참고로 배경색 변경 방법도 코딩되어 있으니 참고하시기 바랍니다. E.. 2022. 12. 9.
[flutter] 플러터 상단바에 침범하지 않게 하기 (appbar 없을때) 플러터를 이용해 appbar 없이 앱을 만들 때 상단바 영역을 침범하는 경우가 있습니다. 해결방법은 매우 간단합니다. Scaffold위젯을 SafeArea어 위젯으로 감싸주기만 하면 됩니다. 상단바를 침범을 해결하는 방법을 예제와 함께 알아보겠습니다. ◆ 상단바 침범 예제 @override Widget build(BuildContext context) { return Scaffold( body: Column( children: [ Text( 'abc', style: TextStyle( fontSize: 50.0, ), ), ], ), ); } ◆ 상단바 침범 해결 예제 아래와 같이 SafeArea위젯을 이용해 Scaffold위젯을 감싸주면 상단바 침범 문제가 해결됩니다. @override Widget b.. 2022. 12. 7.
[flutter] 플러터 ListTile을 이용하여 List만들어보기 플러터에서 List를 만들 때 자주 사용하는 것이 ListTile입니다. ListTile은 리스트의 한 열을 그릴 때 사용합니다. ◆ ListTile이란? 이해를 쉽게 하기 위해 이미지를 보시면 초록색 네모칸의 아이콘, 텍스트, 아이콘과 같이 한 줄에 여러개의 위젯을 배치할 때 ListTile을 이용합니다. ◆ ListTile사용 방법 ListTile 중 가장 많이 사용하는 인자는leading, title, trailing입니다. leading은 좌측에 올 위젯, title은 리스트의 중앙에 배치할 위젯, trailing은 리스트의 우측에 배치할 위젯을 넣어 줍니다. 아래 예제는 leading에 home아이콘, title은 home, trailing은 add아이콘을 배치한 것입니다, Widget buil.. 2022. 12. 2.