처음에

이런 식으로 스 와이프와 탭 탭 모두에서 페이지를 전환 할 수있는 것을 만듭니다.

htps : // 기주 b. 코 m/쇼타로 427/파게_아니마치온_사 mpぇ
여기에 실제로 움직이는 코드가 있으므로, 만약 이해하기 어려우면 이쪽도 봐 주세요

환경

Flutter : 1.20.0채널 : stableDart : 2.9.1

BottomNavigationBar 만들기

UI 만들기

먼저 외형을 만듭니다.

main.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //　~~~ 略 ~~~
      //　~~~以下追加~~~
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('ホーム'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.pages),
            title: Text('コンテンツ'),
          ),
        ],
      ),
    );
  }

이제 핫 리로드하면 이런 느낌의 외형이 될 것입니다.


하지만, 아직 버튼을 눌러도 아무 일도 일어나지 않는다고 생각하므로, 우선은 「콘텐츠」를 누르면 액티브가 바뀌도록 합시다

아이콘 동적화

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ~~~ 略 ~~~

  // ~~~ 以下追加 ~~~
  int _currentIndex = 0; 

  void onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
  // ~~~ ここまで ~~~

  // ~~~ 略 ~~~
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ~~~ 略 ~~~
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('ホーム'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.pages),
            title: Text('コンテンツ'),
          ),
        ],
        currentIndex: _currentIndex,  // 追加!!
        onTap: onItemTapped,          // 追加!!
      ),
    );
  }
}

이제 탭바의 아이콘을 선택하면 색이 바뀌게 되었다고 생각합니다!
그럼, 다음은 페이지를 만들어 탭을 누르면 페이지가 전환되는 부분을 만들어 갑니다

PageView 만들기

PageView를 사용하면 스와이프와 같은 액션에서 애니메이션이 있는 페이지 전환을 구현할 수 있습니다.

내용 만들기

페이지 전환을 하는 콘텐츠의 위젯 만들기
여기서는 단순히 Widget 배열을 정의하기 만하면됩니다.

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ~~~ 略 ~~~

  // ~~~~ 以下追加 ~~~
  static const List<Widget> _widgets = <Widget>[
    Center(
      child: Text(
        'This Page is HOME',
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
      ),
    ),
    Center(
      child: Text(
        'This Page is Contents',
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
      ),
    ),
  ];
  // ~~~ ここまで ~~~

  // ~~~ 略 ~~~
}

다음으로 Scaffold의 Body 부분에 PageView를 구현합니다.

main.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ~~~ 略 ~~~

      // ~~~ 以下変更 ~~~
      body: PageView(
        children: _widgets,
        onPageChanged: onItemTapped,
      ),
      // ~~~ ここまで ~~~
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('ホーム'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.pages),
            title: Text('コンテンツ'),
          ),
        ],
        currentIndex: _currentIndex,
        onTap: onItemTapped,
      ),
    );
  }

이제 다시로드하면 스 와이프로 페이지가 전환됩니다.
그러나, 탭의 아이콘으로의 페이지 전환을 아직 만들지 않았기 때문에, 다음으로 그 부분을 만들어 갑니다!

PageController 만들기

방금 변경한 PageView에 자작의 PageController를 적용시켜, 탭을 아이콘을 눌렀을 때에 페이지의 전환을 실시해 갑시다

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ~~~ 略 ~~~

  // ~~~ 追加 ~~~
  final PageController _pageController = PageController();
  // ~~~ ここまで ~~~

  void onItemTapped(int index) {
    // ~~~ 追加 ~~~
    _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 100), curve: Curves.easeIn);
    // ~~~ ここまで ~~~
    setState(() {
      _currentIndex = index;
    });
  }

  // ~~~ 略 ~~~

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ~~~ 略 ~~~
      body: PageView(
        children: _widgets,
        onPageChanged: onItemTapped,
        // ~~~~ 以下追加 ~~~
        controller: _pageController, 
      ),
      // ~~~ 略 ~~~
    );
  }
}

새롭게 PageController 를 정의하고, 그것을 방금 만든 PageView 에 적용.

그 컨트롤러를 통해, 탭의 아이콘이 탭되었을 때에 애니메이션 첨부로 페이지 전환을 실시하는 구조입니다

마지막으로

Flutter로 앱을 만들고 있고, 탭의 페이지 천이는 어떻게 하는 거야? 라고 생각했기 때문에 여러가지 조사해 보았습니다
만약 도움이 되었다면 다행입니다!