Doesn't Singlechildscrollview() work on AppBar/SliverAppBar's property bottom:PrefferedSize, in flutter?

Question

I'm using the bottom property of SliverAppBar in flutter to make it like Youtube's App Bar. AS we know that the second row of the app bar has a horizontal scroll view. I've tried to implement sinlechildscrollview in the bottom property, but the second row of the app bar is not getting scrollable to the horizontal side. I've tried it with different methods, So I wonder whether the SCSV works with the bottom property or not? It will be very helpful if someone provides a solution.

Code

bottom: PreferredSize(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(2.0),
                          ),
                        ),
                        height: 40,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Row(
                            children: const [
                              Icon(Icons.explore_outlined),
                              SizedBox(
                                width: 5,
                              ),
                              Text(
                                'Explore',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(1.0),
                          ),
                        ),
                        height: 40.0,
                        width: 2.0,
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              'All',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              'Flutter',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              'MongoDb',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              'JavaScript',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              'GTA SanAndreas',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              'Forza Horizon 5',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                    ],
                  ),
                ),
              ),
              preferredSize: const Size.fromHeight(56.0),
            ),

score 0 · Answer 1 · answered Mar 24 '22 at 09:07

0

Short answer: Yes, it does work.

What's more, I pasted your example into a CustomScrollView with a SliverAppBar and it works perfectly straight away!

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(
        title: Text('Sliver AppBar'),
        bottom: PreferredSize(
          ...
        ),
      ),
   ],
 );
}

This is on my real Android device running Android 10

answered Mar 24 '22 at 09:07

fravolt

2,565
1
4
19

Then It might be the issue of desktop version and browser. Because it won't work on chrome as well. – M Nouman Mar 24 '22 at 09:42

score 0 · Answer 2 · answered Aug 20 '22 at 16:43

use this code

appBar: AppBar(
      title: SingleChildScrollView(
        scrollDirection: Axis.horizontal,  // it's important
        child: Text(
          'your title',
          style: TextStyle(
            overflow: TextOverflow.clip,
          ),
        ),
      ),
    ),

Doesn't Singlechildscrollview() work on AppBar/SliverAppBar's property bottom:PrefferedSize, in flutter?

2 Answers2