하단에 위치하는 네비게이션바를 구현하는 방법은 크게 3가지가 있다. 약간의 차이점이 있으니 필요에 따라 사용하면 되겠다. DefaultTabController 사용 return MaterialApp( title: 'chat used firebase', theme: ThemeData(primaryColor: Colors.white), home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Text('fire chat App'), ), body: TabBarView( children: [ Text('홈 스크린'), Text('채팅 스크린'), Text('마이 스크린'), ], ), bottomNavigationBar: Ta..

앱에서 텍스트를 입력받을 때, 키보드가 하단에서 팝업된다. 뒤로가기 등으로 키보드가 내려갈 때를 감지해야한다면 해당 패키지를 사용하면 된다. 예를 들어 Textfield에 포커스가 되고 키보드가 팝업되며 특정 위젯이 바뀌었는데, 사용자가 뒤로가기로 키보드를 내리는 경우 특정 위젯을 되돌려놓아야하는 경우가 있겠다. keyboard_visibility | Flutter Package Flutter plugin for discovering the state of the soft-keyboard visibility on Android and iOS. pub.dev 코드 void initState(){ KeyboardVisibilityNotification().addNewListener( onHide : () {..

21/11/27 수정된 글입니다. 플러터는 모바일 애플리케이션과 웹을 동시에 제작할 수 있게 고안된 프레임워크이다. 그리고 최근 2.0에서 리눅스, 맥, 윈도우와 같은 응용프로그램들도 개발 할 수 있게 업데이트 되었다. Flutter Gallery gallery.flutter.dev 플러터로 만들어진 샘플 웹 사이트이다. 나름대로 웹 사이트의 구색을 갖추고 있지만, 웹 사이트 크기를 늘리고 줄여보면 여지없이 성능이 떨어지는게 느껴진다. 필자는 최근 React를 경험하며 간단한 프로덕트들을 개발했고, 결론적으로 플러터 웹은 갈길이 상당히 멀다는걸 느꼈다. 아래는 React와 플러터 웹을 경험하며 느낀점을 간단하게 QA로 정리한 글이다. [플러터] 플러터 웹에 대한 Q&A 모음 Flutter web에 관한 ..

위젯의 모서리를 둥글게하고 테두리를 넣기 위해선 위젯의 속성에 decoration이나 shape가 있어야한다. 해당 속성에서 아래의 방법으로 위젯을 둥글게, 테두리를 디자인 할 수 있다. 아래의 두 가지 유형을 기억하면 대부분의 위젯을 처리할 수 있다. Decoration 속성을 가진 위젯 Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(50), //모서리를 둥글게 border: Border.all(color: Colors.black12, width: 3)), //테두리 Shape 속성을 가진 위젯 ButtonTheme( shape: RoundedRectangleBorder( borderRadius: BorderRadiu..

플러터도 여느 프로그램처럼 main 함수에서 시작한다. main 함수에서는 runnApp 함수로 일반적으로 MaterialApp을 호출한다. MaterialApp은 타이틀, 앱의 전반적인 디자인과 관련된 테마 등을 속성으로 가지며, home 속성으로 하위 스크린을 호출할 수 있다. 안드로이드 디자인을 기반으로 하는 MaterialApp 대신 IOS 디자인을 기반으로하는 CupertinoApp을 사용할 수도 있다. 대부분의 디자인이 커스텀이 되기때문에 사실 어떤 것을 사용하든 상관이 없고 정보가 더 많은 MaterialApp을 기본으로 사용하는 것을 추천한다. (CupertinoApp을 사용하면 picker view를 사용할 수 있다는 장점은 있다.) Main 함수 void main() { //1) 스마트..