안녕하세요. 이번 포스팅에서는 이벤트(버튼 클릭 등) 발생 시 특정 위젯이 위치한 위치로 스크롤 이동하는 방법에 대해서 알아보겠습니다. 웹에서 url에 Fragment(#)를 이용해서 Fragment id에 해당하는 HTMLElement를 보이게 하는것과 동일한 동작이라고 보면 됩니다. 방법은 아주 간단합니다. 특정 위젯에 대한 정보를 알기 위한 key 값을 등록하고 Scrollable.ensureVisible을 이용하면 됩니다. 먼저 특정 Widget에 key를 등록해줍니다. ... final GlobalKey _widgetKey = GlobalKey(); @override Widget build(BuildContext context) { @override Widget build(BuildContext..

안녕하세요. 이번 포스팅에서는 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( '바디', ), ); ... 위의 코드를 작성을 하고 실행을 해보면 아래..