안녕하세요. 이번 포스팅에서는 Flutter 버튼의 배경색을 변경하는 방법에 대해서 알아보겠습니다. 이 포스팅에서는 이전 포스팅의 버튼 크기 변경과 동일하게 style을 수정하는 방법입니다. 다만 그냥 색상을 변경하는 방법과 theme data를 이용해서 변경하는 방법에 대해서 알아보겠습니다. Flutter에서 버튼 크기 변경하기 안녕하세요. 이번 포스팅에서는 Flutter에서 버튼 크기를 변경하는 방법에 대해서 알아보겠습니다. 먼저 Flutter의 버튼들에 대해서 알아보겠습니다. Flutter의 버튼은 TextButton, FilledButton, ElevatedButton, dev-bak.tistory.com 먼저 style을 수정하는 방법에 대해서 알아보겠습니다. 방법은 간단합니다. 버튼의 styl..

안녕하세요. 이번 포스팅에서는 Flutter에서 버튼의 Radius를 변경하는 방법에 대해서 알아보겠습니다. 방법은 버튼의 style 속성의 shape를 변경해주면 됩니다. 먼저, 차이를 알아보기 위해서 기본 OutlinedButton을 하나 추가해서 확인을 해보겠습니다. OutlinedButton( onPressed: () {}, child: Text('Click Button'), ), 위와 같이 코드를 작성하고 확인을 하면 아래와 같이 사이드에 아주 살짝 라운딩이 있는 버튼을 볼수 있습니다. 이제 이 버튼의 라운딩을 변경을 해보겠습니다. 저는 먼저 8px로 변경을 해보겠습니다. 변경하는 방법으로는 버튼 style의 shape에 RoundedRectangleBorder로 작업을 해주면 됩니다. Outl..

안녕하세요. 이번 포스팅에서는 Flutter에서 버튼 크기를 변경하는 방법에 대해서 알아보겠습니다. 먼저 Flutter의 버튼들에 대해서 알아보겠습니다. Flutter의 버튼은 TextButton, FilledButton, ElevatedButton, IconButton, MaterialButton, BackButton ... 등이 있습니다. 여기서는 TextButton, FilledButton, ElevatedButton의 크기를 변경하는 방법에 대해서 알아보겠습니다. 먼저 버튼의 크기를 변경하는 방법에 대해서 알아보겠습니다. 간단하게 Button을 SizedBox 혹은 Container와 같은 크기를 가진 Widget으로 감싸주면 됩니다. 기본 FilledButton을 추가해서 어떻게 보이는지 알아보..

안녕하세요. 이번 포스팅에서는 Flutter에서 BottomNavigationBar 추가하는 방법에 대해서 알아보겠습니다. BottomNavigationBar를 추가하는 방법은 쉽습니다. Scaffold에 bottomNavigationBar을 추가해주면 됩니다. ... home: Scaffold( ... bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: '홈', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: '검색', ), BottomNavigationBarItem( icon: Icon(Icons.per..

안녕하세요. 이번 포스팅에서는 Flutter AppBar에 검색 입력창을 보여주는 방법에 대해서 알아보겠습니다. 이전에 작성한 iOS와 안드로이드 appBar의 title 정렬하는 거의 확장된 개념이라고 보시면 될거 같습니다. 방법은 간단하게 appBar의 title에 전체 너비의 Container와 TextFiled, Button을 추가해주면 됩니다. ... return Scaffold( appBar: AppBar( title: Container( child: TextField(), ), actions: [ TextButton( onPressed: () {}, child: Text('검색'), ), ], ), body: Text( '바디', ), ); ... 위의 코드를 작성을 하고 실행을 해보면 아래..

안녕하세요. 이번 포스팅에서는 이전에 iOS 타이틀 왼쪽 정렬하기에 이어서 안드로이드 타이틀을 중앙 정렬하는 방법에 대해서 알아보겠습니다. Flutter 안드로이드 appBar의 타이틀은 기본 왼쪽 정렬이 되어 있습니다. ... return Scaffold( appBar: AppBar( title: Text( '테스트', ), ), body: Text( '바디', ), ); ... 그렇다면 안드로이드에서 타이틀을 중앙 정렬을 하는 방법은 어떻게 하면 될까요?? 이전 포스팅 iOS에서 타이틀 왼쪽 정렬하는 방법에서 마지막 부분의 appBar의 title의 Widget을 전체 너비의 Container와 그 안에 Text를 중앙 정렬로 추가를 해주면 쉽게 중앙 정렬을 할 수 있습니다. Flutter iOS A..