如何在描述中使用 introduction_screen package package link 在 Flutter 中创建动态 introduction_screen

Question

如何使用 introduction_screen 包 .

在 Flutter 中创建动态 introduction_screen

意味着我们在 api 中传递了 3 个屏幕。 introduction_screen 3 页。

我们在 api 中通过第 4 个屏幕。 introduction_screen 4 页。

包裹Link： https://pub.dev/packages/introduction_screen

Api 像这样（3屏）：

[

{
"name_Title": "title name",
"description" "Description"
},

{
"name_Title": "title name",
"description" "Description"
},

{
"name_Title": "title name",
"description" "Description"
},

],

Api 像这样（4屏）：

[

{
"name_Title": "title name",
"description" "Description"
},

{
"name_Title": "title name",
"description" "Description"
},

{
"name_Title": "title name",
"description" "Description"
},

{
"name_Title": "title name",
"description" "Description"
},

]

感谢您给我宝贵的时间。

Answer 1

将您的 JSON 转换为模型 class，然后使用它创建 PageViewModel

的列表

您的模型 class 将是：

// To parse this JSON data, do
//
//     final welcome = welcomeFromJson(jsonString);

import 'dart:convert';

List<Welcome> welcomeFromJson(String str) => List<Welcome>.from(json.decode(str).map((x) => Welcome.fromJson(x)));

String welcomeToJson(List<Welcome> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Welcome {
    Welcome({
        this.nameTitle,
        this.description,
    });

    String nameTitle;
    String description;

    factory Welcome.fromJson(Map<String, dynamic> json) => Welcome(
        nameTitle: json["name_Title"] == null ? null : json["name_Title"],
        description: json["description"] == null ? null : json["description"],
    );

    Map<String, dynamic> toJson() => {
        "name_Title": nameTitle == null ? null : nameTitle,
        "description": description == null ? null : description,
    };
}

Answer 2

您需要将数据解析为 PageViewModel:

// your api data
  List listViews = [
    {"name_Title": "title name", "description": "Description"},
    {"name_Title": "title name", "description": "Description"},
    {"name_Title": "title name", "description": "Description"},
    {"name_Title": "title name", "description": "Description"}
  ];

  //method to convert data to PageViewModel
  Widget PageModelView getPageViewModel(dynamic data) {
    return PageViewModel(
      title: data.name_Title,
      bodyWidget: Center(child: Text(data.description)),
    );
  }
  
  // call your introduction screen like that
  IntroductionScreen(
  pages: listViews.map((e) => getPageViewModel(e)).toList(),
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600)),
  onDone: () {
    // When done button is press
  },
);

Answer 3

看这个例子

Link :

https://github.com/Tbsdev-Anmol/Schoolie/blob/main/lib/Screen/Intor_Page.dart

      class Home extends StatefulWidget {
      const Home({Key? key}) : super(key: key);
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
      List  lists {
        return [
          {"name_Title": "title name", "description": "Description"},
    {"name_Title": "title name", "description": "Description"},
    {"name_Title": "title name", "description": "Description"},
    {"name_Title": "title name", "description": "Description"}
    
      ];
      }
     Widget PageModelView getPageViewModel(dynamic data) {
    return PageViewModel(
      title: data.name_Title,
      bodyWidget: Center(child: Text(data.description)),
    );
  }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
    
          body: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(children: [
    
    
              Padding(
                padding: const EdgeInsets.only(top: 25),
                child: Container(height: MediaQuery.of(context).size.height*.7,
                  child: IntroductionScreen(
    
                 
    
    
                    next: Text(""),
    
                    pages: lists.map((e) => getPageViewModel(e)).toList(),
                    showNextButton: false,
                    showDoneButton: false,
    
                    done: Text(""),
                    onDone: () {},
                  ),
                ),
              ),
    
            InkWell(onTap: (){
              Navigator.pushReplacement(context,
                  MaterialPageRoute(builder:
                      (context) =>
                         (){}
                  )
              );
            },
              child: Container(
                width: MediaQuery.of(context).size.width*.8,
                height: 50,
                decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    MyColors.Intro_Text_Color,
                    MyColors.Intro_button_Color
                  ]
                )
              ),
              child: Center(child: Text("Get started",style: TextStyle(color: MyColors.Text_Coloe_white,fontSize: 20,fontWeight: FontWeight.bold),)),
              ),
            )
            ],),
          ),
        );
      }
    }

Answer 4

Intromodel.dart

class IntroModel {
  String? nameTitle;
  String? description;

  IntroModel({this.nameTitle, this.description});

  IntroModel.fromJson(Map<String, dynamic> json) {
    nameTitle = json['name_Title'];
    description = json['description'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name_Title'] = this.nameTitle;
    data['description'] = this.description;
    return data;
  }
}

Intropage.dart

class IntroPage extends StatelessWidget {
  final Isscar4;

  IntroPage({
    Key? key,
    required this.Isscar4,
  }) : super(key: key);

  List<PageViewModel> listPagesViewModel = [];

  List<IntroModel> models = [];

  @override
  Widget build(BuildContext context) {
    List<dynamic> intro = fetchIntroApi(Isscar4);

    intro.forEach((element) {
      var element2 = element as Map<String, dynamic>;
      var cd = IntroModel.fromJson(element2);
      models.add(cd);
    });
    models.forEach((element) {
      listPagesViewModel.add(PageViewModel(
        title: element.nameTitle,
        body: element.description,
        image: Center(
          child: Image.network(
              Isscar4
                  ? "https://c.tenor.com/75ffA59OV-sAAAAC/broke-down-red-car.gif"
                  : 'https://c.tenor.com/Jd1J0SSD_3sAAAAC/bike-bicycle.gif',
              height: 175.0),
        ),
      ));
    });

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: "/intro",
        home: Scaffold(
          body: IntroductionScreen(
            next: ElevatedButton(
              onPressed: () {},
              child: Text(''),
            ),
            pages: listPagesViewModel,
            done: const Text('Done',
                style: TextStyle(fontWeight: FontWeight.w600)),
            onDone: () {
              // When done button is press
            },
          ),
        ));
  }

  List fetchIntroApi(bool bool) {
    var four = bool;
    if (four) {
      var data =
          '[ {"name_Title": "title name1","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"}, {"name_Title": "title name4","description": "description4"} ]';
      return json.decode(data);
    } else {
      var data =
          '[ {"name_Title": "title name","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"} ]';
      return json.decode(data);
    }
  }
}

MainPage.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // });

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: "/",
        home: Scaffold(
            body:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 100,
                width: 100,
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => IntroPage(Isscar4: true)),
                    );
                  },
                  child: RichText(
                      text: TextSpan(
                    text: 'CAR',
                    style: TextStyle(
                        letterSpacing: 3,
                        color: Colors.white,
                        fontWeight: FontWeight.w400),
                    children: [
                      TextSpan(
                          text: '4',
                          style: TextStyle(
                              fontSize: 25,
                              color: Colors.red,
                              fontWeight: FontWeight.bold))
                    ],
                  )
                      // IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
                      ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 100,
                width: 100,
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => IntroPage(Isscar4: false)),
                    );
                  },
                  child: RichText(
                      text: TextSpan(
                    text: 'BIKE',
                    style: TextStyle(
                        letterSpacing: 3,
                        color: Colors.white,
                        fontWeight: FontWeight.w400),
                    children: [
                      TextSpan(
                          text: '2',
                          style: TextStyle(
                              fontSize: 25,
                              color: Colors.red,
                              fontWeight: FontWeight.bold))
                    ],
                  )
                      // IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
                      ),
                ),
              ),
            ],
          )
        ])));
  }

  MaterialApp Swithwidget(istrue) {
    return MaterialApp(
      initialRoute: "/intro",
      home: Scaffold(
        body: IntroPage(
          Isscar4: istrue,
        ),
      ),
    );
  }
}

完整代码

   import 'dart:convert';
    
    import 'package:flutter/material.dart';
    import 'package:introduction_screen/introduction_screen.dart';
    
    void main() {
      runApp(
        // For widgets to be able to read providers, we need to wrap the entire
        // application in a 'ProviderScope' widget.
        // This is where the state of our providers will be stored.
        MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
      );
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // });
    
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            initialRoute: "/",
            home: Scaffold(
                body:
                    Column(mainAxisAlignment: MainAxisAlignment.center, children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 100,
                    width: 100,
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => IntroPage(Isscar4: true)),
                        );
                      },
                      child: RichText(
                          text: TextSpan(
                        text: 'CAR',
                        style: TextStyle(
                            letterSpacing: 3,
                            color: Colors.white,
                            fontWeight: FontWeight.w400),
                        children: [
                          TextSpan(
                              text: '4',
                              style: TextStyle(
                                  fontSize: 25,
                                  color: Colors.red,
                                  fontWeight: FontWeight.bold))
                        ],
                      )
                          // IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
                          ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 100,
                    width: 100,
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => IntroPage(Isscar4: false)),
                        );
                      },
                      child: RichText(
                          text: TextSpan(
                        text: 'BIKE',
                        style: TextStyle(
                            letterSpacing: 3,
                            color: Colors.white,
                            fontWeight: FontWeight.w400),
                        children: [
                          TextSpan(
                              text: '2',
                              style: TextStyle(
                                  fontSize: 25,
                                  color: Colors.red,
                                  fontWeight: FontWeight.bold))
                        ],
                      )
                          // IntroPage(listPagesViewModel: listPagesViewModel) //Material App,
                          ),
                    ),
                  ),
                ],
              )
            ])));
      }
    
      MaterialApp Swithwidget(istrue) {
        return MaterialApp(
          initialRoute: "/intro",
          home: Scaffold(
            body: IntroPage(
              Isscar4: istrue,
            ),
          ),
        );
      }
    }
    
    class Hi extends StatelessWidget {
      const Hi({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text("df"),
        );
      }
    }
    
    class IntroPage extends StatelessWidget {
      final Isscar4;
    
      IntroPage({
        Key? key,
        required this.Isscar4,
      }) : super(key: key);
    
      List<PageViewModel> listPagesViewModel = [];
    
      List<IntroModel> models = [];
    
      @override
      Widget build(BuildContext context) {
        List<dynamic> intro = fetchIntroApi(Isscar4);
    
        intro.forEach((element) {
          var element2 = element as Map<String, dynamic>;
          var cd = IntroModel.fromJson(element2);
          models.add(cd);
        });
        models.forEach((element) {
          listPagesViewModel.add(PageViewModel(
            title: element.nameTitle,
            body: element.description,
            image: Center(
              child: Image.network(
                  Isscar4
                      ? "https://c.tenor.com/75ffA59OV-sAAAAC/broke-down-red-car.gif"
                      : 'https://c.tenor.com/Jd1J0SSD_3sAAAAC/bike-bicycle.gif',
                  height: 175.0),
            ),
          ));
        });
    
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            initialRoute: "/intro",
            home: Scaffold(
              body: IntroductionScreen(
                next: ElevatedButton(
                  onPressed: () {},
                  child: Text(''),
                ),
                pages: listPagesViewModel,
                done: const Text('Done',
                    style: TextStyle(fontWeight: FontWeight.w600)),
                onDone: () {
                  // When done button is press
                },
              ),
            ));
      }
    
      List fetchIntroApi(bool bool) {
        var four = bool;
        if (four) {
          var data =
              '[ {"name_Title": "title name1","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"}, {"name_Title": "title name4","description": "description4"} ]';
          return json.decode(data);
        } else {
          var data =
              '[ {"name_Title1": "title name","description": "description1"}, {"name_Title": "title name2","description": "description2"}, {"name_Title": "title name3","description": "description3"} ]';
          return json.decode(data);
        }
      }
    }
    
    class IntroModel {
      String? nameTitle;
      String? description;
    
      IntroModel({this.nameTitle, this.description});
    
      IntroModel.fromJson(Map<String, dynamic> json) {
        nameTitle = json['name_Title'];
        description = json['description'];
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['name_Title'] = this.nameTitle;
        data['description'] = this.description;
        return data;
      }
    }

Answer 5

我使用的是页面视图生成器。

原因：因为 introduction_screen 包使用了页面视图。未使用页面视图生成器。

这意味着页面视图构建器属性构建运行时间小部件。

并且页面视图未构建运行时间小部件。

这意味着您首先要定义打印 5 个小部件的数量，即打印 5 个小部件。

****我们使用构建器的主要目的是因为它是绘制小部件运行时间类似于 Future 构建器和列表视图构建器

您需要一个代码。请在下面回复这个答案谢谢

1

如何在描述中使用 introduction_screen package package link 在 Flutter 中创建动态 introduction_screen

How to create dynamic introduction_screen in Flutter with introduction_screen package package link in description

flutter

flutter-dependencies

flutter-layout