Flutter/Flutter Widget Basic

[플러터] TabBar 만들기

Tabbar를 만드는 방법에도 여러가지가 있다. AppBar와 함께 만들 수 있고 TabBar와 TabBarView 위젯으로도 만들 수 있다. 후자의 방법에 대해 알아보자. TabBar & TabBarView class _LibraryPageState extends State with SingleTickerProviderStateMixin { //클래스에 with 해준다. ... } 사용하고자하는 클래스에 TickerProvider를 with 해준다. 간단하게 Animation의 Sync를 맞춰준다고 생각하면 된다. //선언부터 한다 TabController? _tabController; @override initState(){ //정의는 initState 이후에 한다 _tabController = ne..

[플러터] 위젯에 클릭 이벤트 부여하기 (Inkwell, GestureDetector)

플러터의 일반적인 위젯들에는 onClick, onPressed 속성이 없다. InkWell 혹은 GestureDetector으로 일반 위젯을 감싸주면 클릭 이벤트들을 부여할 수 있다. InkWell InkWell( splashColor: hoverColor: highlightColor: onTap: () { } child : Container(...) ... InkWell은 onTap, onTapDown, onHover의 기본적인 클릭 이벤트들이 내장되어있다. 또한, 위젯을 클릭 했을때 아래와 같은 클릭 애니메이션이 기본으로 발생한다. 만약 애니메이션이 마음에 들지 않는다면 Colors.transparent을 정의해주면 된다. 간단하게 클릭 기능을 만들고 싶은 위젯을 InkWell로 감싸주면된다. foc..

[플러터] Toast 메시지 (Snack bar) 생성하기

Snack bar 자바에서는 toast(토스트) 메시지가 존재한다. 하지만 플러터에는 toast 메시지가 기본으로 제공되지 않는다. 대신 snack bar(스낵바)라는 것을 기본으로 제공해주고 있다. 자바의 그것과 흡사하지만 조금은 다른 형태이다. 화면의 최하단 부분에 표시되며, toast보다 시간이나 세부적인 사항들을 유연하게 조절할 수 있게 제공해주고 있다. 물론, toast의 형태를 원한다면 패키지를 사용해 어렵지 않게 구현할 수 있을 것이다. 사용 플러터의 snack bar를 사용하는 방법은 매우 간단하다. ScaffoldMessenger.of(context) .showSnackBar(SnackBar( content: Text('hi'), )); content 속성내의 위젯을 snack bar에 ..

[플러터] onClick 속성이 가능한 Text 위젯

Text 위젯에서 Click에 따른 이벤트가 필요하다거나, 하나의 Text 라인에서 각 부분들이 다른 TextStyle을 가져야 할때, RichText라는 위젯을 사용한다. 구조가 조금 특이한 위젯이다. RichText라는 최상단 위젯에 text 속성으로 TextSpan 위젯을 준다. TextSpan 위젯은 children을 받을 수 있고, 여기에 TextSpan을 여러개 생성해서 넣어준다. RichText( text: TextSpan(children: [ TextSpan( text: '안녕하세요.', style: TextStyle(color: Colors.black)), TextSpan( text: '저는 ', style: TextStyle(fontWeight: FontWeight.w700)), Tex..

[플러터] bottom Navigation을 구현하는 3가지 방법

하단에 위치하는 네비게이션바를 구현하는 방법은 크게 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..