tourist-project / yuwaku_proto_flutter

湯涌用アプリ
1 stars 0 forks source link

使い方ガイドのバグ解消 #115

Closed keigo194547 closed 2 years ago

keigo194547 commented 2 years ago

バグの解消法

元々TutorialStepPage内で使い方ガイドのレイアウトを決めていた。 しかし、この状態ではレイアウトとインジケーターが独立して動いてはくれない。 これを直すためにTutorialPageの内容を以下のように変更した

/// 直す前
body : PageView(
              scrollDirection: Axis.horizontal,
              controller: pageController,
              children: <Widget>[
                TutorialStepPage(PageData.first, pageController),
                TutorialStepPage(PageData.second, pageController),
              ],
            ),
/// 直した後
body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Flexible(
            flex: 8,
            child: PageView(
              scrollDirection: Axis.horizontal,
              controller: pageController,
              children: <Widget>[
                TutorialStepPage(PageData.first, pageController),
                TutorialStepPage(PageData.second, pageController),
              ],
            ),
          ),
          Flexible(
            flex: 1,
            child: SmoothPageIndicator(
              controller: pageController,
              count: 2,
              effect: const WormEffect(
                  dotColor: Colors.grey,
                  activeDotColor: Color.fromRGBO(186, 66, 43, 100)
              ),
            ),
          ),
        ],
      ),

Columnでラップすることにより画面主要レイアウトとインジケーターの独立が為され、以前のように画面ページの移行と同時にインジケーターの移動が起こらなくなった。

yamanetaisei commented 2 years ago

Pixel4a で確認したところ治ってましたー 👍

LGTM