flutter 。如何使容器比屏幕更宽？

Question

我正在尝试为页面 Controller 创建视差背景。为此目的，我需要创建一个比屏幕宽的背景图像。我把它放在这样的容器里:

@override
  Widget build(BuildContext context) {

    return Material(
      child: Stack(
        children: [
          Container(
              width: 4000,
              height:  250,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('assets/images/pizza_bg.png'),
                      fit: BoxFit.cover,
                      repeat: ImageRepeat.noRepeat
                  )
              )
          ),
        ],
      ),
    );
  }

但问题是，无论我指定什么宽度，容器(当然还有图像)永远不会比屏幕更宽。有可能吗？
附言我尝试使用 SizedBox 和 AspectRatio 小部件，它们都给出了相同的结果

Answer 1

试试这个，作为一个选择

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Container(
                width: 4000,
                height: 250,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/pizza_bg.png'),
                    fit: BoxFit.cover,
                    repeat: ImageRepeat.noRepeat,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

您也可以禁用用户滚动并通过滚动 Controller 管理滚动位置

    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const NeverScrollableScrollPhysics(),
      controller: controller, // your ScrollController
      child: Container(
        width: 4000,
        height: 250,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/pizza_bg.png'),
            fit: BoxFit.cover,
            repeat: ImageRepeat.noRepeat,
          ),
        ),
      ),
    ),