我是Flutter 翼新手.我想用IntroductionScreen小工具来制作全屏渐变背景色.然而,当我在盒子装饰中使用渐变 colored颜色 时,底部有白色的盒子空间.我不希望这种事发生.这是我的代码

return IntroductionScreen(
  pages: [
    PageViewModel(
      title: "Hallo1",
      body:
          "Instead of having to buy an entire share, invest any amount you want.",
      image: buildImage('assets/onboard1bg.png'),
      decoration: buildDecoration(),
    ),
    PageViewModel(
      title: "Hallo2",
      body:
          "Instead of having to buy an entire share, invest any amount you want.",
      image: buildImage('assets/onboard2bg.png'),
      decoration: buildDecoration(),
    ),
  ],
  showNextButton: false,
  showDoneButton: false,
  showSkipButton: false,
  dotsDecorator: getDotDecoration(),
  globalFooter: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    child: Column(
      children: [
        ElevatedButton(
          child: Text(
            'Login',
            style: TextStyle(color: Colors.white),
          ),
          onPressed: () {
            CupertinoModalBottom(context, "Login", SignIn(), true);
          },
          style: ElevatedButton.styleFrom(
            minimumSize: const Size.fromHeight(50),
            primary: Colors.orange,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
          ),
        ),
      ],
    ),
  ),
);
  }

  DotsDecorator getDotDecoration() => DotsDecorator(
        color: Colors.grey,
        size: Size(15, 8),
        activeColor: Colors.white,
        activeSize: Size(25, 8),
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
      );

  Widget buildImage(String path) => Center(child: Image.asset(path));

  PageDecoration buildDecoration() => PageDecoration(
        imagePadding: EdgeInsets.all(0),
        boxDecoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color.fromRGBO(205, 193, 255, 1.0),
              Color.fromARGB(255, 255, 79, 10),
              Color.fromARGB(255, 255, 31, 31),
            ],
          ),
        ),
      );
}

这就是它看起来的样子,我想做渐变色全屏.但是,并没有奏效

enter image description here

推荐答案

不幸的是,无法移除白框,因为it's hardcoded in the introduction_screen source code.

但有一种变通办法.只需用StackIntroductionScreen包起来,并将其globalBackgroundColor设置为Colors.transparent.go 掉PageViewModel的装饰.然后,添加具有所需装饰的Container作为Stack中的第一个小部件作为背景.它将看起来像这样:

Screenshot

以下是代码片段:

return Stack(
  children: [
    Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color.fromRGBO(205, 193, 255, 1.0),
            Color.fromARGB(255, 255, 79, 10),
            Color.fromARGB(255, 255, 31, 31),
          ],
        ),
      ),
    ),
    IntroductionScreen(

    ...

Flutter相关问答推荐

DART 3.3:为什么扩展类型不起作用?

如何在容器小部件中的图像旁边添加文本?

在Flutter 中每次点击按钮时都很难调用自定义函数

从Firestore流式传输单个文档还是整个集合更好?

如何使listview.builder在筛选列表后实时更新

如何在点击查看措辞下方添加句子?

在 flutter 的列中使用 Expanded 时出现渲染 Flex 错误

更改下拉按钮的背景 colored颜色 - flutter

Flutter/Riverpod 创建复杂对象的副本,其值在某处发生变化

有什么办法可以消除Flutter 中的传递依赖?

Flutter sliver 持久化

Flutter/Dart 返回_Future的实例而不是实际的字符串值

扩展磁贴尾随图标在与一个磁贴交互时更新列表中的所有内容.如何只更改展开图块的图标?

更改文本字段Flutter 中最大字母的 colored颜色

如何在 flutter 中过滤 DateTime(intl)?

仅使用 Flutter 在本地环境中托管 Web 服务器

配置项目:firebase_core时出现问题

如何使用列Flutter 中文本占用的空间来控制svg宽度

在 flutter 中使用 Firebase 实时数据库数据创建无限滚动效果

如何使用 Riverpod 在运行时动态创建提供程序?