인프런 커뮤니티 질문&답변

ldsik03님의 프로필 이미지
ldsik03

작성한 질문수

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

StateNotifierProvider 실습

탭바 이동후 다시 돌아가면 화면스크롤이 상단으로 이동하는 문제

작성

·

270

0

bottom navigation bar의 4개 탭이 있는데

예를 들면 첫번째 탭인 홈탭에서 10페이지 정도 아래로 스크롤해서 내려간후

두번째 탭인 음식탭으로 이동한후 다시 첫번째 탭인 홈탭으로 돌아오면 화면 스크롤이 그대로 있는것이 아니라 가장 상단으로 이동되어 있습니다.

상단으로 이동되지 않고 그대로 있는 방법이 있을까요?

감사합니다.

답변 1

1

코드팩토리님의 프로필 이미지
코드팩토리
지식공유자

안녕하세요!

스크롤 포지션이 리셋되는 이유는 TabBarView 이동이 있을때마다 위젯이 새로 그려지기 때문입니다.

이걸 제한하고 위젯의 상태를 기억해두고싶다면 AutomaticallyKeepAliveMixin을 사용하면 됩니다.

아래 예제 코드를 첨부해드리겠습니다.

감사합니다!

import 'package:flutter/material.dart';

void main() {
  runApp(
    Root(),
  );
}

class Root extends StatefulWidget {
  const Root({Key? key}) : super(key: key);

  @override
  State<Root> createState() => _RootState();
}

class _RootState extends State<Root>{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            children: List.generate(
              4,
              (index) => Column(
                children: [
                  Expanded(
                    flex: 1,
                    child: Center(
                      child: Text(
                        'Page ${index + 1}',
                        style: TextStyle(
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: _List(),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _List extends StatefulWidget {
  const _List({Key? key}) : super(key: key);

  @override
  State<_List> createState() => _ListState();
}

class _ListState extends State<_List> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    return  ListView.builder(
      itemBuilder: (_, index) => Center(
        child: SizedBox(
          height: 50,
          child: Text(
            index.toString(),
          ),
        ),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
ldsik03님의 프로필 이미지
ldsik03

작성한 질문수

질문하기