TIL #009
191112 화
오늘 배운 점
<Flutter>
1. StreamBuilder
- 시간, 순서에 상관없이 다양한 일들이 일어나는 비동기(asynchronous) 데이터가 사용되는 리액티브 프로그래밍에서 필요한 데이터 관리 위젯이다. 각 이벤트를 Stream이라고 하고, 이 연속적인 데이터 흐름에 따라 빌드하는 것이 StreamBuilder이다.
StreamBuilder(
stream: _myStream,
initialData: data, //stream을 받아오기 전 화면에 표시할 내용
builder: (context, snapshot) {
if(!snapshot.hasData) {
return CircularProgressIndicator();
} else if(snapshot.hasError) {
return snapshot.error;
} return MyWidget(snapshot.data);
},
);
- StreamSink, StreamController, StreamTransformer, StreamSubscription 등을 활용하여 다양한 방식으로 stream을 처리할 수 있다.
- RxDart에서 Stream 대신 Observable을 써서 PublishSubject, BehaviorSubject, ReplaySubject 등 브로드캐스트 형식의 StreamController를 사용하기도 한다.나중에 ReactiveX API를 Dart로 확장한 RxDart 패키지와 함께 더 자세히 공부해 볼 예정이다.
2. Banner
- Flutter 공식 Banner 위젯으로 간단한 배너는 만들 수 있다.
//Flutter 공식 Banner 위젯
Banner(
child: Container(
child: Center(
child: Image.network('Image for banner'),
),
message: '인기 상품',
height: 200.0, width: 900.0,
),
),
- 자동 재생되는 슬라이드쇼 느낌의 배너 모음은 Carousel Slider로 만드는 게 더 편하다.
//carousel을 활용한 자동재생 배너
//install autoplay banner package @pubspec.yaml
dependencies:
carousel_slider: ^1.3.1
//@.dart
import 'package:carousel_slider/carousel_slider.dart';
int _current = 0;
@override
Widget build(BuildContext context) {
Widget autoplay_banner = Container(//or Stack
height: 345.0,
child: CarouselSlider(
height: 400.0,
//aspectRatio: 16/9,
initialPage: 0,
enableInfiniteScroll: true,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curve.fastOutSlowIn,
pauseAutoPlayOnTouch: Duration(seconds: 10),
scrollDirection: Axis.horizontal,
onPageChangedCallback: (index) {
setState(() {
_current = index;
});
},
items: ['image_url1', 'url2', 'url3', 'url4'].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
child: GestureDetector(
child: Image.network(i, fit: BoxFit.fill),
onTap: () {
Navigator.push<Widget>(context, MaterialPageRoute(
builder: (context) => Store(i)),
);
},
),
);
},
);
},
).toList(),
)
);
return Scaffold(
body: Column(
children: <Widget>[
autoplay_banner,
],
),
);
}
3. Dismissable - Swipe to dismiss 기능
- 가장 기본적인 제스처 인식 위젯 중 하나. Swipe로 리스트 아이템을 삭제하는 동작을 구현해보았다.
//StatefulWidget{}에 State({Key key}) : super(key: key);
final items = List<String>.generate(20, (i) => "Item ${i+1}");
@override
Widget build(BuildcContext context) {
return Scaffold(
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
//return ListTile(title: Text('${items[index]}'));
return Dismissible(
key: Key(item),
onDismissed: (direction) {
setState(() {
items.removeAt(index);
});
},
background: Container(color: Colors.red),
child: ListTile(),
);
},
);
);
}
내일 배울 점
1. 내일은 네트워크와 컴퓨터구조 공부를 조금 할 것 같다.
2. Flutter는 설정 화면 정도 만들어볼 예정
더보기
- Typescript로 블록체인 구현하기 관련 공부를 해볼까
'삽질하는 개발자 hashblown' 카테고리의 다른 글
프론트엔드 개발자의 TIL #011 (0) | 2019.11.16 |
---|---|
프론트엔드 개발자의 TIL #010 (0) | 2019.11.13 |
프론트엔드 개발자의 TIL #008 (0) | 2019.11.11 |
프론트엔드 개발자의 TIL #007 (0) | 2019.11.10 |
프론트엔드 개발자의 TIL #006 (0) | 2019.11.09 |
댓글