프론트엔드 개발자의 TIL #009

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로 블록체인 구현하기 관련 공부를 해볼까