전체 글67 [flutter] ElevatedButton border radius(Elevatedbutton 둥글게) ElevatedButton 모서리를 둥글게 하는 방법, 각지게하는 방법, 동그란 ElevatedButton 만드는 방법을 알아보겠습니다. ▣ ElevatedButton 둥글게 만들기(border radius설정은 안됨) ElevatedButton을 둥글게 만들기 위해서는 ElevatedButton의 style인자를 이용해야 합니다. 아래 코드의 shape: StadiumBorder()을 이용하면 아래 버튼과 같이 모양을 만들 수 있습니다. ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, minimumSize: Size(110,40), shape: StadiumBorder(), ), onPressed: () {}.. 2022. 12. 21. [flutter] 플러터 ElevatedButton 크기 지정 방법 플러터의 ElevatedButton 버튼의 가로, 세로 크기를 지정하는 방법을 알아보겠습니다. ◆ ElevatedButton 크기 지정 ElevatedButton위젯의 속성인 style 인자 값을 ElevatedButton.styleFrom의 인자인 minimumSize을 통해 지정해 주면 됩니다. minimumSize인자는 Size위젯을 이용해 가로와 세로 값을 지정해 줄 수 있습니다. 간단한 예제를 통해 확인해 보겠습니다. ElevatedButton( style: ElevatedButton.styleFrom( minimumSize: Size(100, 50), ), onPressed: () {}, child: Text('확인'), ), 2022. 12. 17. [flutter]플러터 텍스트필드 비밀번호 효과(TextField password) 플러터로 텍스트필드를 만들 때 비밀번호 입력 시 텍스트가 보이지 않도록 하는 설정 방법을 알아보겠습니다. ◆ 텍스트필드 비밀번호 입력 효과 아래 이미지처럼 아이디를 입력할 땐 텍스트가 보이지만 비밀번호를 입력할 땐 텍스트가 보이지 않도록 하는 효과를 주기 위해선 TextField위젯의 인자인 obscureText를 true로 지정해 주어야 합니다. 아래 코드를 확인해 보면 더 쉽게 알 수 있습니다. TextField( obscureText: true, ), 2022. 12. 17. [flutter] 플러터 텍스트필드 크기, 길이(TextField Size) 플러터 텍스트필드 크기를 중 가로길이와 세로 길이를 지정하는 방법을 알아보겠습니다. ◆ 텍스트필드 세로 크기 설정 방법 텍스트필드의 세로 크기를 설정하는 방법은 TextField위젯의 인자인 style속성에서 fontSize을 통해 변경이 가능합니다. 간단한 코딩 예제를 통해 확인해 보겠습니다. TextField( style: TextStyle(fontSize: 20), ), ◆ 텍스트필드 가로 크기 설정 방법 텍스트필드의 가로 크기는 padding을 이용해 설정합니다. TextField를 감싸는 위젯의 padding값을 조절하면 TextField의 가로 크기를 조절할 수 있습니다. 예제를 통해 확인해 보겠습니다. Contain( child: Padding( padding: const EdgeInsets.. 2022. 12. 17. [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. 이전 1 2 3 4 ··· 9 다음
