我如何在 flutter 中使用展示案例视图?

How can i use show case view in flutter?

我在我的应用程序中使用 showCaseView 包,想展示一次(在第一次启动之后), 我怎样才能只执行一次并且在下次启动时不显示它?

  @override
  void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback(
          (_) {
        ShowCaseWidget.of(myContext).startShowCase([_one]);
      }
  );
  }
  @override
  Widget build(BuildContext context) {
  return ShowCaseWidget(
   // onFinish: ,
    builder:
  Builder(builder: (context) {
  myContext = context;
  return Scaffold(
    floatingActionButton: Showcase(
      key: _one,
      title: 'Title',
      description: 'Desc',
      child: InkWell(
        onTap: () {},
        child: FloatingActionButton(
         onPressed: (){
          print("floating");
        }
        )
      ),
    ),
  );
}));
}

您可以使用 shared_preferences 包轻松完成此操作:

class IsFirstLaunchPage extends StatefulWidget {
  static const PREFERENCES_IS_FIRST_LAUNCH_STRING = "PREFERENCES_IS_FIRST_LAUNCH_STRING";

  @override
  _IsFirstLaunchPageState createState() => _IsFirstLaunchPageState();
}

class _IsFirstLaunchPageState extends State<IsFirstLaunchPage> {
  GlobalKey _one = GlobalKey();
  BuildContext myContext;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
            (_) {
          _isFirstLaunch().then((result){
            if(result)
              ShowCaseWidget.of(myContext).startShowCase([_one]);
          });
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return ShowCaseWidget(
      // onFinish: ,
        builder:
        Builder(builder: (context) {
          myContext = context;
          return Scaffold(
            floatingActionButton: Showcase(
              key: _one,
              title: 'Title',
              description: 'Desc',
              child: InkWell(
                  onTap: () {},
                  child: FloatingActionButton(
                      onPressed: () {
                        print("floating");
                      }
                  )
              ),
            ),
          );
        }));
  }

  Future<bool> _isFirstLaunch() async{
    final sharedPreferences = await SharedPreferences.getInstance();
    bool isFirstLaunch = sharedPreferences.getBool(IsFirstLaunchPage.PREFERENCES_IS_FIRST_LAUNCH_STRING) ?? true;

    if(isFirstLaunch)
      sharedPreferences.setBool(IsFirstLaunchPage.PREFERENCES_IS_FIRST_LAUNCH_STRING, false);

    return isFirstLaunch;
  }
}

要实现这一点,请遵循以下代码

首先为内容创建一个3模型

class ExamCardModel {
  String image;
  String examName;
  String time;
  Widget icon;
  Color startColor;
  Color endColor;

  ExamCardModel(
      {this.image,
      this.examName,
      this.time,
      this.icon,
      this.startColor,
      this.endColor});
}

class LessonsModel {
  String image;
  String title;
  String backgroundImages;

  LessonsModel({
    this.image,
    this.title,
    this.backgroundImages,
  });
}

class LiveModel {
  String image;
  String title;
  String message;
  String status;

  LiveModel({
    this.image,
    this.title,
    this.message,
    this.status,
  });
}

终于在屏幕上显示您的展示

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:nb_utils/nb_utils.dart';
import 'package:prokit_flutter/integrations/screens/Marquee/MHomePage.dart';
import 'package:prokit_flutter/main.dart';
import 'package:prokit_flutter/main/utils/AppWidget.dart';
import 'package:showcaseview/showcase.dart';
import 'package:showcaseview/showcase_widget.dart';

import 'ExamCardModel.dart';
import 'LessonsModel.dart';
import 'LiveVideo.dart';

class SVCHomePage extends StatefulWidget {
  static String tag = '/SVCHomePage';

  @override
  _SVCHomePageState createState() => _SVCHomePageState();
}

const sdTextPrimaryColor = Color(0xFF000000);
const sdTextSecondaryColor = Color(0xFF757575);
const sdPrimaryColor = Color(0xFF3281FF);
const sdSecondaryColorRed = Color(0xFFFF5C5C);

class _SVCHomePageState extends State<SVCHomePage> {
//   Global Variable to maintain the sequence of the ShowCaseView.
  GlobalKey _one = GlobalKey();
  GlobalKey _two = GlobalKey();
  GlobalKey _three = GlobalKey();
  BuildContext myContext;

  BoxDecoration boxDecoration(
      {double radius = 80.0, Color backGroundColor = sdPrimaryColor, double blurRadius = 8.0, double spreadRadius = 8.0, Color radiusColor = Colors.black12, Gradient gradient}) {
    return BoxDecoration(
        borderRadius: BorderRadius.circular(radius),
        boxShadow: [
          BoxShadow(
            color: radiusColor,
            blurRadius: blurRadius,
            spreadRadius: spreadRadius,
          ),
        ],
        color: backGroundColor,
        gradient: gradient);
  }

  List<LessonsModel> lessons = [
    LessonsModel(
        image: 'images/smartDeck/images/sdearth.png',
        title: 'GeoGraphy',
        backgroundImages: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSePqEkOx6meh5aP5W0wRjvqCwDMFrpKyjFQA&usqp=CAU'),
    LessonsModel(
      image: 'images/smartDeck/images/sdruler.png',
      title: 'Math',
      backgroundImages: 'https://d2c7ipcroan06u.cloudfront.net/wp-content/uploads/2019/07/mathematics-696x364.jpg',
    ),
    LessonsModel(
        image: 'images/smartDeck/images/sdbiology.png',
        title: 'Biology',
        backgroundImages: 'https://physicsworld.com/wp-content/uploads/2019/09/dna-binary-code-255618778-Shutterstock_ymgerman.jpg'),
    LessonsModel(
        image: 'images/smartDeck/images/sdcomputer.png',
        title: 'Computer',
        backgroundImages: 'https://previews.123rf.com/images/aleksander1/aleksander11302/aleksander1130200018/18017241-bulb-made-of-computer-subjects-.jpg'),
    LessonsModel(
        image: 'images/smartDeck/images/sdmusic.png',
        title: 'Music',
        backgroundImages: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSePqEkOx6meh5aP5W0wRjvqCwDMFrpKyjFQA&usqp=CAU'),
    LessonsModel(image: 'images/smartDeck/images/sddance.png', title: 'Dance', backgroundImages: 'https://i.pinimg.com/originals/30/45/9c/30459c328f5f535509d3131f773ab10f.jpg'),
  ];

  List<LiveModel> liveVideo = [
    LiveModel(
        image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTFX3JNvflemOpVIwXGd_BdLChYZefcPNWCAQ&usqp=CAU',
        title: 'Talkshow',
        message: 'Top 10 eco campus in \nindonesia that you can be..',
        status: 'LIVE NOW'),
    LiveModel(
        image:
            'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR4sfk7iQgjlNupZAy_A2HSv2hpgRm__UedzdvidFN8GAwd0SSKazIR2DwP39tHc0qUrNOERBaWBVvsds_wivtmBwjtOh8zRTz6kQ&usqp=CAU&ec=45690273',
        title: 'Talkshow',
        message: 'Top 5 colleges in \nIndia that you can be..',
        status: 'LIVE NOW'),
    LiveModel(
        image: 'https://static01.nyt.com/images/2020/03/14/upshot/14up-colleges-remote/14up-colleges-remote-mediumSquareAt3X.jpg',
        title: 'Talkshow',
        message: 'Top 10 eco campus in \nindonesia that you can be..',
        status: 'LIVE NOW'),
  ];

  List<ExamCardModel> cards = [
    ExamCardModel(
      image: 'images/smartDeck/images/sdbiology.png',
      examName: 'Biology final\nexams',
      time: '15 minutes',
      icon: Icon(
        Icons.notifications_active,
        color: Colors.white54,
      ),
      startColor: Color(0xFF2889EB),
      endColor: Color(0xFF0B56CB),
    ),
    ExamCardModel(
      image: 'images/smartDeck/images/sdchemistry.png',
      examName: 'Chemistry daily\ntest',
      time: '15 minutes',
      icon: Icon(
        Icons.notifications_off,
        color: Colors.white54,
      ),
      startColor: Color(0xFFF1AD4B),
      endColor: Color(0xFFF26340),
    ),
    ExamCardModel(
      image: 'images/smartDeck/images/sdmusic.png',
      examName: 'Music daily\nlearning',
      time: '3 hours',
      icon: Icon(
        Icons.notifications,
        color: Colors.white54,
      ),
      startColor: Color(0xFF7EA56C),
      endColor: Color(0xFF6C9258),
    )
  ];

  @override
  void initState() {
    super.initState();
    //  Start showcase view after current widget frames are drawn.
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Future.delayed(Duration(milliseconds: 200), () => ShowCaseWidget.of(myContext).startShowCase([_one, _two, _three]));
    });
  }

  @override
  Widget build(BuildContext context) {
    // keep all your content in Show Case Widget.
    return ShowCaseWidget(
      builder: Builder(
        builder: (context) {
          myContext = context;
          return Scaffold(
            appBar: appBar(context, 'Show Case View'),
            body: Container(
              child: Container(
                child: SingleChildScrollView(
                  padding: EdgeInsets.only(top: 20, right: 15, left: 20, bottom: 16),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Showcase(
//                               Specify the key (i.e. in which place you want to show this showcase)
                              key: _one,
//                               Specify the title
                              title: 'Search',
//                               Add the Instruction
                              description: 'Search for lessons or exam',
                              child: Container(
                                decoration: boxDecoration(radius: 5, backGroundColor: Colors.white38, blurRadius: 0, spreadRadius: 0),
                                child: TextField(
                                  style: TextStyle(fontSize: 20),
                                  decoration: InputDecoration(
                                    border: InputBorder.none,
                                    hintText: 'Search',
                                    prefixIcon: Icon(
                                      Icons.search,
                                      color: Colors.black,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Showcase(
                            description: 'See Notification',
                            key: _two,
                            title: 'Notification',
                            child: Stack(
                              children: <Widget>[
                                Container(
                                  margin: EdgeInsets.only(left: 10),
                                  padding: EdgeInsets.only(left: 10, top: 5, right: 15),
                                  child: InkWell(
                                    child: Icon(
                                      Icons.notifications_none,
                                      size: 30,
                                      color: appStore.iconColor,
                                    ),
                                  ),
                                ),
                                Positioned(
                                  right: 9,
                                  top: 0,
                                  child: CircleAvatar(
                                    radius: 10,
                                    backgroundColor: Colors.red,
                                    child: Text(
                                      '3',
                                      style: TextStyle(fontSize: 14, color: Colors.white),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      Text(
                        'Hi, John',
                        style: boldTextStyle(),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'You have 3 exams pending',
                        style: TextStyle(fontSize: 14, color: Color(0xFF757575)),
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Container(
                        height: 250,
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: cards == null ? 0 : cards.length,
                            itemBuilder: (BuildContext context, int index) {
                              return InkWell(
                                child: Container(
                                  width: 180.0,
                                  margin: EdgeInsets.only(right: 15),
                                  padding: EdgeInsets.all(8),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5),
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.black12,
                                        blurRadius: 8,
                                        spreadRadius: 2,
                                      ),
                                    ],
                                    gradient: LinearGradient(
                                      colors: [cards[index].startColor, cards[index].endColor],
                                    ),
                                  ),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      CircleAvatar(
                                        radius: 40,
                                        backgroundColor: Colors.white30,
                                        child: Image.asset(
                                          cards[index].image,
                                          height: 60,
                                          width: 60,
                                        ),
                                      ),
                                      SizedBox(
                                        height: 15,
                                      ),
                                      Text(
                                        cards[index].examName,
                                        style: secondaryTextStyle(color: Colors.white, size: 20),
                                      ),
                                      SizedBox(
                                        height: 15,
                                      ),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: <Widget>[
                                          Text(
                                            cards[index].time,
                                            style: secondaryTextStyle(color: Colors.white54, size: 18),
                                          ),
                                          cards[index].icon
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                              );
                            }),
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Expanded(
                            child: Text(
                              'Lessons',
                              style: boldTextStyle(size: 16),
                            ),
                          ),
                          InkWell(
                            child: Showcase(
                              description: 'Click to See all Lessons',
                              key: _three,
                              title: 'Lessons',
                              child: Text(
                                'SEE ALL',
                                style: boldTextStyle(color: sdPrimaryColor, size: 14),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Text(
                        'Senior High School - 12th Grade',
                        style: secondaryTextStyle(size: 14),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Container(
                        height: 150,
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: lessons.length,
                            itemBuilder: (BuildContext context, int index) {
                              return InkWell(
                                child: Container(
                                  margin: EdgeInsets.only(right: 20),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    mainAxisSize: MainAxisSize.min,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                      CircleAvatar(
                                        radius: 30,
                                        backgroundColor: Colors.white,
                                        child: Image.asset(
                                          lessons[index].image,
                                          height: 30,
                                          width: 30,
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 10),
                                        child: Text(
                                          lessons[index].title,
                                          style: primaryTextStyle(size: 14),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              );
                            }),
                      ),
                      SizedBox(
                        height: 25,
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Expanded(
                            child: Text(
                              'Live Video',
                              style: boldTextStyle(),
                            ),
                          ),
                          Text(
                            'SEE ALL',
                            style: boldTextStyle(color: sdPrimaryColor, size: 14),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Container(
                        height: 130,
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: liveVideo.length,
                            shrinkWrap: true,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                margin: EdgeInsets.only(left: 20),
                                width: 300,
                                decoration: boxDecorationRoundedWithShadow(8,backgroundColor: appStore.appBarColor),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Container(
                                      height: 130,
                                      width: 115,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(5),
                                          bottomLeft: Radius.circular(5),
                                        ),
                                        color: appStore.appBarColor,
                                        image: DecorationImage(
                                          image: CachedNetworkImageProvider(liveVideo[index].image),
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                    ),
                                    SizedBox(width: 16),
                                    Expanded(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: <Widget>[
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                            children: <Widget>[
                                              Text(
                                                liveVideo[index].title,
                                                style: boldTextStyle(size: 16),
                                              ),
                                              Padding(
                                                padding: EdgeInsets.only(top: 6),
                                                child: Align(
                                                  alignment: Alignment.topRight,
                                                  child: Icon(Icons.more_vert),
                                                ),
                                              )
                                            ],
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(top: 8),
                                            color: appStore.appBarColor,
                                            child: FittedBox(
                                              child: Text(
                                                liveVideo[index].message,
                                                style: primaryTextStyle(size: 14),
                                                maxLines: 2,
                                                overflow: TextOverflow.ellipsis,
                                              ),
                                            ),
                                          ),
                                          FittedBox(
                                            child: Container(
                                              margin: EdgeInsets.only(top: 15),
                                              decoration: boxDecorations(bgColor: sdSecondaryColorRed, radius: 4),
                                              padding: EdgeInsets.fromLTRB(10, 6, 10, 6),
                                              child: Center(
                                                child: Text(
                                                  liveVideo[index].status,
                                                  style: secondaryTextStyle(size: 8, color: Colors.white),
                                                ),
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              );
                            }),
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}