Flutter实战:利用shared_preferences,让引导页仅在第一次打开应用时出现

 

Pub地址:shared_preferences

应用场景

用户在第一次打开App时,App会出现引导页,一般只出现一次,后续再次打开App则不再展示引导页。

代码

注:在安卓模拟器环境下运行代码

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {

  // 为了确保flutter引擎已初始化完成
  WidgetsFlutterBinding.ensureInitialized();

   // 在 main() 方法后面添加 async 关键字,表示 main() 方法是一个异步方法。
  // 这意味着在 main() 方法中可以使用 await 关键字来等待异步操作的完成,例如等待获取 SharedPreferences 的实例。
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool showIntro = prefs.getBool('show_intro') ?? true;

  runApp(MyApp(showIntro: showIntro, prefs: prefs));
}

class MyApp extends StatelessWidget {
  final bool showIntro;
  final SharedPreferences prefs;
  const MyApp({super.key, required this.showIntro, required this.prefs});
  @override
  Widget build(BuildContext context) {
    //填入设计稿中设备的屏幕尺寸,单位dp
    return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'demo app',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: child,
        );
      },
      child: showIntro
          ? IntroPage(
              prefs: prefs,
            )
          : const MyHomePage(),
    );
  }
}

class IntroPage extends StatelessWidget {
  final SharedPreferences prefs;
  const IntroPage({super.key, required this.prefs});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: const Center(
          child: Text('引导页,只出现一次'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            prefs.setBool('show_intro', false);
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const MyHomePage()));
          },
          child: const Icon(Icons.arrow_forward),
        ));
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      body: Center(
        child: Container(
          width: 200.w,
          height: 52.h,
          color: Colors.red,
          child: const Center(
            child: Text(
              '首页内容',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

 

使用device_preview运行。

import 'package:device_preview/device_preview.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  // 为了确保flutter引擎已初始化完成
  WidgetsFlutterBinding.ensureInitialized();

  // 在 main() 方法后面添加 async 关键字,表示 main() 方法是一个异步方法。
  // 这意味着在 main() 方法中可以使用 await 关键字来等待异步操作的完成,例如等待获取 SharedPreferences 的实例。
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool showIntro = prefs.getBool('show_intro') ?? true;
  runApp(
    DevicePreview(
      enabled: !kReleaseMode,
      builder: (context) => MyApp(showIntro: showIntro, prefs: prefs),
    ),
  );
  // runApp(MyApp(showIntro: showIntro, prefs: prefs));
}

class MyApp extends StatelessWidget {
  final bool showIntro;
  final SharedPreferences prefs;
  const MyApp({super.key, required this.showIntro, required this.prefs});
  @override
  Widget build(BuildContext context) {
    //填入设计稿中设备的屏幕尺寸,单位dp
    ScreenUtil.init(context, designSize: const Size(375, 812));
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      debugShowCheckedModeBanner: false,
      title: 'demo app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: showIntro
          ? IntroPage(
              prefs: prefs,
            )
          : MyHomePage(),
    );
  }
}

class IntroPage extends StatelessWidget {
  final SharedPreferences prefs;
  const IntroPage({super.key, required this.prefs});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: const Center(
          child: Text('引导页,只出现一次'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            prefs.setBool('show_intro', false);
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const MyHomePage()));
          },
          child: const Icon(Icons.arrow_forward),
        ));
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      body: Center(
        child: Container(
          width: 200.w,
          height: 52.h,
          color: Colors.red,
          child: Center(
            child: Text(
              '设备宽度与设计稿比例:${ScreenUtil().scaleWidth},设备高度与设计稿比例:${ScreenUtil().scaleHeight}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

 

 

除非注明,否则均为呆小猴博客原创文章,转载必须以链接形式标明本文链接!付费资源为虚拟物品,一经出售,概不退款!
呆小猴 » Flutter实战:利用shared_preferences,让引导页仅在第一次打开应用时出现

发表回复

呆小猴 · 专注安全学习与分享

关于作者 联系作者