How to make different background colors top and bottom for BouncingScrollPhysics in ios?

Question

I need to make a gray background and a white background for text and a picture (which goes beyond the white background by 20 pixels), I did the main layout, but the problem remains that due to the ios bouncing effect, when scrolling, the background from the bottom remains gray, I would like to it was white on the bottom and gray on the top, any idea how I can change my widgets for this?

My code

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CupertinoPageScaffold(
        backgroundColor: Colors.grey,
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Stack(
            children: [
              Column(
                children: [
                  const SizedBox(height: 206),
                  Container(
                    color: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        children: const [
                          SizedBox(height: 50),
                          Text(Strings.data, style: TextStyle(color: Colors.black, fontSize: 14, decoration: TextDecoration.none),),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  const SizedBox(height: 30),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    child: Container(
                      width: double.infinity,
                      height: 196,
                      color: Colors.green,
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Strings {
  static const data =
      'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata';
}

Top background Bottom background

Have you thought about making it not bounce when scrolling or do you really want the bounce ? — FlutterChicken, Feb 01 '22 at 12:38
@FlutterChicken Of course I want it! :) this is the usual scroll behavior on ios. I came up with a strange solution to the problem, you can put a scrollview on the stack and another container with a bottom background color with a height of 0. When the scroll position becomes greater than the maximum scroll value, set the height of the container to the difference between the current scroll and the maximum. Then the background will stretch when overscrolling. Sounds terrible, I don't like it, but it works — Кирилл Кашапов, Feb 01 '22 at 14:01

score 2 · Answer 1 · answered Oct 03 '22 at 15:35

I have managed to solve this using a Container as Scaffold's body and adding a gradient to it.

Scaffold(
    body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                    Colors.white,
                    Colors.red,
                ],
                stops: [0.49, 0.51],
            ),
        ),
        child: // Your code
    ),
);

stops property and values given 0.49 and 0.51 guarantees that color changes take effect in the middle of the screen. So, no matter how high or low the user expands the widget they will just see the 2 colors you've given to colors property. Works like a charm in my case.

One minor side note
Ensure all child widgets have a non-transparent background color to reduce unwanted regressions.

How to make different background colors top and bottom for BouncingScrollPhysics in ios?

1 Answers1