如何在 Flutter 上的 SliverGrid / SliverList 上拐角半径

Question

Is it possible to borderRadius to SliverList / SliverGrid ? If yes, how to radius topRight and topLeft

 CustomScrollView(
        slivers: <Widget>[
           SliverAppBar(
           ),
          ),
          SliverGrid(
            gridDelegate:
             SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  color: Colors.teal[100 * (index % 9)],
                  alignment: Alignment.center,
                  child: Text('grid item $index'),
                );
              },
              childCount: 120,
            ),
          ),
        ],
      ),

Answer 1

You might not be able to make a SliverList rounded (even in some part), but you can tweak your way through by putting the children of the list in a Column and wrapping the Column in a Container then setting the borderRadius of the Container .

And the Scrolling still works perfectly as a normal CustomScrollView

The whole idea is to make the Column work for the SliverList . So you have to set childCount to 1 and allow the Column handle everything about the children

You can try the same for SliverGrid

I wrote an example with SliverList

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

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("Hey"),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                (_, __){
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))
                    ),
                    child: Column(
                      children: List.generate(10, (index) => Container(child: ListTile(title: Text("$index nothing")))),
                    ),
                  );
                },
              childCount: 1
            ),
          )
        ],
      ),
    );
  }
}

I hope this helps you