how to change the border-radius while scrolling my list-view?

Question

I'm working in a project on flutter and i have a problem with my listView.

While I scroll down on the feed, my list view radius seems like this( the border is straight under the two photos):

So basically what I want is for the two photos to be as floating photos and the Latest posts to go under it.

But I want the list to look like this:

Does anyone have any idea about the problem?

check the code below:

              Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 20.0, right: 20.0, top: 10.0, bottom: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: TeamImageContainer(
                            data: data[0],
                            onNavigate: () {
                              Navigator.of(context).pushNamed(
                                  TeamStatisticViewScreen.routeName,
                                  arguments: data[0].id);
                            },
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: TeamImageContainer(
                            data: data[1],
                            onNavigate: () {
                              Navigator.of(context).pushNamed(
                                  TeamStatisticViewScreen.routeName,
                                  arguments: data[1].id);
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              // color: Colors.black38,
                              gradient: LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: [Colors.transparent, Colors.black38],
                                stops: [-0.1, 0.5],
                                tileMode: TileMode.clamp,
                              ),
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(20),
                                  topRight: Radius.circular(20.0)),
                            ),
                            margin: const EdgeInsets.only(top: 20.0),
                            child: Column(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(
                                      right: 20,
                                      left: 20,
                                      bottom: 20.0,
                                      top: 20.0),
                                  child: SizedBox(
                                    width: double.infinity,
                                    child: Align(
                                      alignment: Alignment.topLeft,
                                      child: Text(
                                        'Latest Posts',
                                        style: TextStyle(
                                          color: Color(0xffe0e6f3),
                                          fontSize: 18,
                                          fontFamily: 'SFProText',
                                          fontWeight: FontWeight.w600,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                                Column(
                                  children: _postsData.loadedLatestPosts
                                      .map(
                                        (data) => PostsListWidget(data),
                                      )
                                      .toList(),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),

Answer 1

As far as I can tell, you need to focus on the class/element that is drawing the background. Also, consider declaring the border-radius in a const file so you don't have to hard code the values constantly, you just call "boxCurve" E.G. for your boxDecorationStyle.

It's tough to actually pinpoint what's wrong in your code without knowing which elements are drawn and where, if you can share the GitHub link then it might help :)

Try this :)

           Container(
              decoration: const BoxDecoration(
                // color: Colors.black38,
                gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: [Colors.purple, Colors.blue],
                  stops: [-5, 0.5],
                  tileMode: TileMode.clamp,
                ),
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(5),
                    bottomRight: Radius.circular(5),
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)),
              ),
              margin: const EdgeInsets.only(
                top: 10.0,
                bottom: 10,
                left: 3,
                right: 3,
              ),
              child: Column(
                children: const [
                  Padding(
                    padding: EdgeInsets.only(
                        right: 20, left: 20, bottom: 20.0, top: 20.0),
                    child: SizedBox(
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          'Latest Posts',
                          style: TextStyle(
                            color: Color(0xffe0e6f3),
                            fontSize: 18,
                            fontFamily: 'SFProText',
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ),

MyResult

This is also what I meant earlier with your styles -

Create a new dart file called constants for example...

import 'package:flutter/material.dart';

const kLatestPosts = TextStyle( color: Color(0xffe0e6f3), fontSize: 18, fontFamily: 'SFProText', fontWeight: FontWeight.w600, );

Copy that into it the constants file + import the file on the file you are working on, replace style: TextStyle( with style: kLatestPosts, Now you have tidier code + better performance too :)