Skip to content

[docs] Rendering issue with DecoratedSliver sample #166822

Closed

Description

@navaronbracke

Steps to reproduce

  1. Go to https://api.flutter.dev/flutter/widgets/DecoratedSliver-class.html
  2. View the first sample, which involves some linear gradients
  3. Scroll the sliver in the interactive demo
  4. A gap of a few pixels appears between the two slivers when scrolling

Expected results

No gaps should appear when using DecoratedSlivers

Actual results

Screen.Recording.2025-04-09.at.11.23.21.mov

Code sample

Code sample

This is taken from the sample on the docs.

import 'package:flutter/material.dart';

void main() => runApp(const SliverDecorationExampleApp());

class SliverDecorationExampleApp extends StatelessWidget {
  const SliverDecorationExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(titleLarge: TextStyle(fontSize: 24, color: Colors.white30)),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('SliverDecoration Sample')),
        body: const SliverDecorationExample(),
      ),
    );
  }
}

class SliverDecorationExample extends StatelessWidget {
  const SliverDecorationExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        DecoratedSliver(
          key: const ValueKey<String>('radial-gradient'),
          decoration: const BoxDecoration(
            gradient: RadialGradient(
              center: Alignment(-0.5, -0.6),
              radius: 0.15,
              colors: <Color>[Color(0xFFEEEEEE), Color(0xFF111133)],
              stops: <double>[0.4, 0.8],
            ),
          ),
          sliver: SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              SizedBox(
                height: 200.0,
                child: Center(
                  child: Text(
                    'A moon on a night sky',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                ),
              ),
            ]),
          ),
        ),
        DecoratedSliver(
          key: const ValueKey<String>('linear-gradient'),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[
                Color(0xFF111133),
                Color(0xFF1A237E),
                Color(0xFF283593),
                Color(0xFF3949AB),
                Color(0xFF3F51B5),
                Color(0xFF1976D2),
                Color(0xFF1E88E5),
                Color(0xFF42A5F5),
              ],
            ),
          ),
          sliver: SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              SizedBox(
                height: 500.0,
                child: Container(
                  alignment: Alignment.topCenter,
                  padding: const EdgeInsets.only(top: 56.0),
                  child: Text('A blue sky', style: Theme.of(context).textTheme.titleLarge),
                ),
              ),
            ]),
          ),
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output

The docs site was running on:

Flutter 3.29.2 • 2025-03-14 07:03 • c236373904 • stable

Activity

  1. darshankawar commented on Apr 9, 2025

    @darshankawar
    Member

    Thanks for the report. I was able to replicate this on desktop only (tried on mac), as, on web and mobile (iOS simulator), I was unable to observe the anti-alias.

    stable : 3.29.2
    master : 3.31.0-1.0.pre.425
    
  2. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    and removed
    in triagePresently being triaged by the triage team
    on Apr 9, 2025
  3. Piinks commented on Jun 5, 2025

    @Piinks
    Contributor

    This looks like #14288 an antialiasing issue rather than something specific to DecoratedSliver. It may be good to update the sample to better compose a similar effect ins a different way.

  4. added
    P2Important issues not at the top of the work list
    on Jun 5, 2025
  5. github-actions commented on Feb 16, 2026

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  6. locked as resolved and limited conversation to collaborators on Feb 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: desktopRunning on desktopd: examplesSample code and demosfound in release: 3.29Found to occur in 3.29found in release: 3.31Found to occur in 3.31frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions