Flutter引导滑块包

huangapple go评论63阅读模式
英文:

Flutter onboarding slider package

问题

我刚开始学习Flutter,不知道这是否是适当的地方来询问关于包的问题,但我已经使用了这个包来制作一个应用程序:https://pub.dev/packages/flutter_onboarding_slider。当最后一个屏幕出现时,下面的指示器不可见,因为我不需要浮动按钮,并将其设置为false。我该如何解决这个问题?以下是代码:

import 'package:flutter/material.dart';
import 'package:flutter_onboarding_slider/flutter_onboarding_slider.dart';

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

  @override
  State<OnBoradingPackage> createState() => _OnBoradingPackageState();
}

class _OnBoradingPackageState extends State<OnBoradingPackage> {
  final List<Widget> bgWidgets = const [
    PageWidget(color: Colors.red),
    PageWidget(color: Colors.green),
    PageWidget(color: Colors.yellow),
    PageWidget(color: Colors.blue),
  ];

  final List<String> imgList = [
    'assets/1.jpg',
    'assets/2.jpg',
    'assets/3.jpg',
    'assets/4.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Package'),
      ),
      body: SafeArea(
        top: true,
        bottom: false,
        child: OnBoardingSlider(
          totalPage: 4,
          headerBackgroundColor: Colors.transparent,
          background: bgWidgets,
          speed: 0,
          pageBodies: [for (var img in imgList) Image.asset(img)],
          hasFloatingButton: false,
        ),
      ),
    );
  }
}

class PageWidget extends StatelessWidget {
  const PageWidget({super.key, required this.color});

  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: color),
    );
  }
}

包和版本 - flutter_onboarding_slider: 1.0.9

PS:我已在他们的GitHub存储库上提出了一个问题。

链接:https://github.com/appinioGmbH/flutter_packages/issues/117

英文:

I'm new to learning flutter and I don't know if this is the appropriate place to ask questions about packages but I have made an app using this package: https://pub.dev/packages/flutter_onboarding_slider. When the last screen appears the indicators from below are not visible as I have no need of a floating button and have set it to false. How do I fix it? Here's the code:

import &#39;package:flutter/material.dart&#39;;
import &#39;package:flutter_onboarding_slider/flutter_onboarding_slider.dart&#39;;

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

  @override
  State&lt;OnBoradingPackage&gt; createState() =&gt; _OnBoradingPackageState();
}

class _OnBoradingPackageState extends State&lt;OnBoradingPackage&gt; {
  final List&lt;Widget&gt; bgWidgets = const [
    PageWidget(color: Colors.red),
    PageWidget(color: Colors.green),
    PageWidget(color: Colors.yellow),
    PageWidget(color: Colors.blue),
  ];

  final List&lt;String&gt; imgList = [
    &#39;assets/1.jpg&#39;,
    &#39;assets/2.jpg&#39;,
    &#39;assets/3.jpg&#39;,
    &#39;assets/4.jpg&#39;,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(&#39;Package&#39;),
      ),
      body: SafeArea(
        top: true,
        bottom: false,
        child: OnBoardingSlider(
          totalPage: 4,
          headerBackgroundColor: Colors.transparent,
          background: bgWidgets,
          speed: 0,
          pageBodies: [for (var img in imgList) Image.asset(img)],
          hasFloatingButton: false,
        ),
      ),
    );
  }
}

class PageWidget extends StatelessWidget {
  const PageWidget({super.key, required this.color});

  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: color),
    );
  }
}

Package and version - flutter_onboarding_slider: 1.0.9

PS: I have raised an issue on their github repository.

Link: https://github.com/appinioGmbH/flutter_packages/issues/117

答案1

得分: 1

他们是这样开发的:

这是插件的代码部分:

currentPage == totalPage - 1
  ? SizedBox.shrink()
  : Container(
      padding: EdgeInsets.only(bottom: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: _buildPageIndicator(context),
      ),
    );

如果页面是最后一页,它将隐藏页面指示器,因为他们认为这将是介绍屏幕的结束(您可以在插件页面上检查视频,它与 flutter_onboarding_slider 相同)。

您可以尝试使用 PageView 来开发,而不使用该插件。

英文:

They developed it this way

this is the code from the plugin

currentPage == totalPage - 1
        ? SizedBox.shrink()
        : Container(
            padding: EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: _buildPageIndicator(context),
            ),
          );

if the page is the last page it will hide the page indicator because they thought that it will be the end of the intro screens (you can check the videos on the plugin page and its the same flutter_onboarding_slider).

you can try to develop it using PageView instead without using the plugin

huangapple
  • 本文由 发表于 2023年6月15日 21:17:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76482906.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定