[TIL]220928 - Flutter 기본 위젯(3)

PageView, GridView, BottomNAvigaionBar

ListView page1() {
    return ListView(
      children: [
        ListTile(
          title: Text('ListView'),
          subtitle: Text('Using ListTile'),
          trailing: Icon(Icons.more_vert),
          onTap: () {},
        ),
        ListTile(
          leading: FlutterLogo(
            size: 50.0,
          ),
          title: Text('Flutter'),
          trailing: Icon(Icons.autorenew),
          onTap: () {},
        ),
      ],
    );
  }

  GridView page2() {
    return GridView.count(
      padding: const EdgeInsets.all(10),
      mainAxisSpacing: 50,
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      children: [
        Container(
          color: Colors.purpleAccent,
        ),
        Container(
          color: Colors.purpleAccent,
        ),
        Container(
          color: Colors.purpleAccent,
        ),
        Container(
          color: Colors.purpleAccent,
        ),
        Container(
          color: Colors.purpleAccent,
        ),
        Container(
          color: Colors.purpleAccent,
        ),
      ],
    );
  }

  Container page3() {
    return Container(
      alignment: Alignment.center,
      child: Text(
        'Setting',
        style: TextStyle(
          color: Colors.pink,
          fontSize: 50,
        ),
      ),
    );
  }

 

//BottomNavigaionBar

 final controller = PageController(
    initialPage: 0,
  );

//페이지 번호를 기억하는 변수
  int _curIndex = 0;

  Widget getPage() {
    Widget page;
    switch (_curIndex) {
      case 0:
        page = page1();
        break;
      case 1:
        page = page2();
        break;
      case 2:
        page = page3();
        break;
      default:
        page = page1();
        break;
    }
    return page;
  }
  
  
//build 함수 return Scafford
    body: getPage(),
    bottomNavigationBar: BottomNavigationBar(
      onTap: (index) {
        setState(() {
          _curIndex = index;
        });
      },
      currentIndex: _curIndex,
      selectedItemColor: Colors.blue,
      items: const<BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home'
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search'
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings'
        ),
      ],
    )

---

AppBar, TapBar, TapBarView

  @override
  Widget build(BuildContext context) {
    return DefaultTabController( //tapbar사용 시 필수
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title:  Text('메롱~!!'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home,),),
                Tab(text: '탭2'),
                Tab(icon: Icon(Icons.info), text: '탭3',),
              ],
            ),
          ),
          body: TabBarView (
            children: [
              Container(color: Colors.black38,),
              Container(color: Colors.black26,),
              Container(color: Colors.black12,),
            ],
          ),
        ),
    );
  }

---

위치, 크기, 정렬 관련 위젯

• Center: 중앙으로 정렬시키기 위한 위젯
• Padding: 내부 여백을 표현
• Align: 자식 위젯의 정렬 방향을 결정
• Expanded: 자식 위젯의 크기를 최대한 확장

Padding

Padding(
	padding: const EdgeInsets.all(30.0),
    child: Container(
    	color: Colors.bluegrey,
    ),
),

특정 위치만 padding: EdgeInsets.only({left, top, right, bottom})
네 방향의 값을 별개로 지정: EdgeInsets.fromLTRB(좌, 상, 우, 하)

---

Align

 Align(
        alignment: Alignment.bottomRight,
        child: Container(
          color: Colors.blueGrey,
          height: 200,
          width: 200,
        ),
      )

만약 크기(heigh, width) 지정을 안 해주면?

-> Container 전체를 덮음

---

Expanded

Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blueGrey,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.white70,
            ),
          ),
        ],
      )

• 기본적으로 화면을 가득 채움
• 여러 개의 위젯으로 구성될 경우 같은 비율로 배치됨
  • flex 값을 통해 비율 정할 수 있음
  • default 값은 1임