Can we apply rounded borders to SliverAppBar in Flutter?

Question

[I want to implement this UI with rounded appbar to my shop app] (https://i.stack.imgur.com/YoIIR.jpg)

When I use ClipRRect to apply rounded borders to SliverAppBars I get this error. However, I can apply ClipRRect to normal appBar. I need a sliverAppBar to hide title and only display my tabs when scroll up to save space on screen.

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb](state: RawGestureDetectorState#5a576(gestures: <none>, behavior: opaque)):
A RenderNestedScrollViewViewport expected a child of type RenderSliver but received a child of type RenderClipRRect.

RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.
The RenderNestedScrollViewViewport that expected a RenderSliver child was created by: NestedScrollViewViewport ← IgnorePointer-[GlobalKey#845ec] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#9de96] ← NotificationListener<ScrollMetricsNotification> ← Transform ← ClipRect ← ⋯
The RenderClipRRect that did not match the expected child type was created by: ClipRRect ← NestedScrollViewViewport ← IgnorePointer-[GlobalKey#845ec] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#9de96] ← NotificationListener<ScrollMetricsNotification> ← Transform ← ⋯
The relevant error-causing widget was
NestedScrollView
lib\…\screens\news_feed.dart:27
When the exception was thrown, this was the stack

Here is my code.

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

  static const List<Widget> screens = [
    RetailsScreen(),
    ElonsScreen(),
    RentalsScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      initialIndex: 0,
      child: Scaffold(
        backgroundColor: AppColors.semiWhiteBackground,
        body: NestedScrollView(
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return [
              ClipRRect(
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(25),
                  bottomRight: Radius.circular(25),
                ),
                child: SliverAppBar(
                  title: const LocaleText('newsFeed'),
                  pinned: true,
                  floating: true,
                  forceElevated: innerBoxIsScrolled,
                  bottom: const TabBar(
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 5,
                    indicatorColor: AppColors.secondary,
                    labelStyle: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                    unselectedLabelStyle: TextStyle(
                      fontWeight: FontWeight.normal,
                      fontSize: 15,
                    ),
                    tabs: [
                      Tab(
                        child: LocaleText(
                          'buyAndSell',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: LocaleText(
                          'elons',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: LocaleText(
                          'rental',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ];
          },
          body: const TabBarView(
            children: screens,
          ),
        ),
      ),
    );
  }
}

I use a SliverAppBar to be able to hide scrollBar part of the appBar when scrolling up.

score 0 · Answer 1 · answered Jan 23 '23 at 05:02

Please update your code with :

Remove the ClipRRect from the sliverAppBar and use shape property of sliverAppBar

 shape: const ContinuousRectangleBorder(
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(60),
                              bottomRight: Radius.circular(60))),

Full code :

NestedScrollView(
            headerSliverBuilder: (context, innerBoxIsScrolled) {
              return [
                SliverAppBar(
                  title: const Text('newsFeed'),
                  pinned: true,
                  floating: true,
                  shape: const ContinuousRectangleBorder(
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(60),
                          bottomRight: Radius.circular(60))),
                  forceElevated: innerBoxIsScrolled,
                  bottom: const TabBar(
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 5,
                    indicatorColor: Colors.yellow,
                    labelStyle: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                    unselectedLabelStyle: TextStyle(
                      fontWeight: FontWeight.normal,
                      fontSize: 15,
                    ),
                    tabs: [
                      Tab(
                        child: Text(
                          'buyAndSell',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: Text(
                          'elons',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: Text(
                          'rental',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
              ];
            },
            body: Container(),
          ),

Thanks for the answer. It really works. But one problem that I face is that the tab indicator runs out of the tab. — Mohammad Amini, Jan 23 '23 at 05:07
There are two options for indicator size. It should either be the label size or tab size. The label size looks a bit strange but solves the problem. Is there any way around. Thanks. — Mohammad Amini, Jan 23 '23 at 05:13

Can we apply rounded borders to SliverAppBar in Flutter?

1 Answers1