[ Flutter ] OnBoarding

 

처음 앱이 실행되었을때 설명하는 화면이 나오는 것을 처리하고 싶어서 OnBoarding을 사용

https://pub.dev/packages/introduction_screen

introduction_screen | Flutter package

 

flutter에서 introduction_screen을 활용하여 onBoarding을 구현

---

Dependencies

introduction_screen 의존성 추가

introduction_screen: ^3.1.14

 

---

OnBoarding

OnBoarding 화면을 만들기 위해 메인 컴포넌트를 제작

이후 세부 페이지는 자식컴포넌트로 만들어서 활용

 

IntroductionScreen을 사용할때 next, back, done을 세팅을 해주어야한다

next를 누르면 pages 리스트 안에 넣은 페이지들이 알아서 넘어간다.

 

pages에는 PageViewModel 위젯으로 title과 body를 넣어 사용할 수 있다.

세부적인 내용은 자식컴포넌트를 만들어서 사용하고자 bodyWidget을 활용

 

showBackButton은 뒤로가기버튼의 사용여부라고 생각하면된다.

이후 onDone에서 done을 눌렀을때의 이벤트를 발생

 

앱 처음 실행시에만 onBoarding을 실행시킬것이기에 onDone에 SharedPreferences를 활용하여 캐시를 저장

false로 저장하여 onBoarding을 한번 실행되었다는 것을 처리

 

이후 route설정을 하여 메인 페이지로 이동

class OnBoarding extends StatefulWidget {
  const OnBoarding({super.key});

  @override
  State<OnBoarding> createState() => _OnBoarding();
}

class _OnBoarding extends State<OnBoarding> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntroductionScreen(
        pages: [
          PageViewModel(
            title: "설정하기",
            bodyWidget: IncomeBoarding(),
          // 다른 페이지도 필요에 따라 추가
        ],
        next: const Text("Next"),
        done: const Text("Done"),
        back: const Text("Back"),
        showBackButton: true,
        onDone: ()  {
          
          // 입력값 캐시 저장
          final prefs = await SharedPreferences.getInstance();
          prefs.setBool("onBoarding", false);

          Navigator.pushReplacementNamed(context, '/home');
        },
      ),
    );
  }
}

---

Main

main.dart에서 저장한 onBoarding값을 불러와서 값이 존재하지 않는다면 true로 처리

이렇게 함으로써 앱이 처음 시작할때 onBoarding의 상태 여부를 가져와 true 혹은 false값으로 설정해준다.

 

true면 onBoarding 컴포넌트로 false면 MainPage로 이동하도록 처리

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool boarding = true;

  @override
  void initState() {
    super.initState();
    getBoarding();
  }

  Future<void> getBoarding() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      boarding = prefs.getBool("onBoarding") ?? true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: SafeArea(
          child: boarding ? OnBoarding() : MainPage(),
        ));
  }
}

---

Route

onBoarding페이지에서 done을 누르면 MainPage로 이동을 시켜주기 위해서 routes를 설정

'/home' 으로 route가 설정되어있다면 MainPage로 이동하도록 처리

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: {
          '/home': (BuildContext context) => MainPage(),
        },
        home: SafeArea(
          child: boarding ? OnBoarding() : MainPage(),
        ));
  }

 

빠른 테스트를 위해 한페이지만 설정하였기에 바로 done이 나온다.

만약 마지막 페이지가 아니라면 back, next 버튼이 나오며 마지막 페이지에서 done이 나오게 된다.

 

그럼 done을 누르면 메인페이지로 이동하게 된다.