본문 바로가기
Dev/Flutter

[Common] Widget들

by steady.dev 2019. 4. 6.

 - PageView

: CarouselView와 유사하며, Custom Tab을 만들 때 이를 이용함.

: Tab으로 사용할 때에는 탭 영역 클릭 시 다음 코드 이용 

_tabController = new PageController();

...

body: new PageView(
    controller: _tabController,
    onPageChanged: onTabChanged,
    children: <Widget>[
           new _firstTab.Home(),
           new _secondTab.Dashboard(),
           new _thirdTab.Settings()
    ],
),

bottomNavigationBar: 
    new BottomNavigationBar(
        currentIndex: _tab,
        onTap: onTap,
        items: TabItems.map((TabItem) {
            return new BottomNavigationBarItem(
                title: new Text(TabItem.title),
                icon: new Icon(TabItem.icon),
        );
   }).toList(),
),

 

...

void onTap(int tab){
     _tabController.jumpToPage(tab);
}

https://github.com/leocavalcante/page_view_indicator/blob/master/example1.gif

 

- Drawer

:Master-Detail과 유사한 View

:child에 ListView를 두고 그 안에 원하는 항목들을 넣어준다. (팁: ListView내에 항목 밑 밑줄은 new Devider() 를 사용해주면 된다.) 

drawer: new Drawer(
    child: new ListView(

        children: <Widget> [

            new ListTile(
                leading: new Icon(Icons.chat),
                title: new Text('Support'),
                onTap: () {
                    Navigator.pop(context);   // 이 pop은 Drawer의 pop이다
                    Navigator.of(context).pushNamed('/support');
}
),

        ]  

   ),

),

 

 

'Dev > Flutter' 카테고리의 다른 글

[web] 개발환경 구축 - Android Studio  (0) 2019.07.22
Release Build하기  (0) 2019.07.15
[iOS] Cocoapods 추가하기  (0) 2019.04.05
[iOS] Bridging-Header 파일  (0) 2019.04.05
[Flutter] Firebase를 이용한 Google Sign in 구현하기  (0) 2019.03.25

댓글