Scrolling effect outside of scrolling view? Flutter Web

Issue

I wuld like to be able to scroll even if the cursor was on the right side of the row.
And maybe having the scroll bar on the far right as normal.
How can I get this effect?

There culd be a problem with bottom overflow. Shuld there be two scroll sections?

this is what i currently have

enter image description here

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: SingleChildScrollView(
            child: Column(
              children: [
                Image.network(
                  'https://images.unsplash.com/photo-1601628828688-632f38a5a7d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1009&q=80',
                  fit: BoxFit.cover,
                ),
                Image.network(
                  'https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
                  fit: BoxFit.cover,
                ),
                Image.network(
                  'https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
                  fit: BoxFit.cover,
                ),
              ],
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  CustomTextWidget(
                    text: 'Just a Title',
                    style: textHeadingThree,
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
                  CustomParagraphWidget(
                    text: [
                      TextSpan(
                        children: [
                          TextSpan(
                            text:
                                'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
                            style: textText,
                          ),
                          TextSpan(
                            text:
                                ' sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                            style: textText,
                          ),
                          TextSpan(
                            text:
                                ' Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris',
                            style: textText,
                          ),
                          TextSpan(
                            text: ' nisi ut aliquip ex ea commodo consequat.',
                            style: textText,
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Can someone point me to the right direction?
Thanks.

Solution

You can try to use Stack with Positioned

DartPad sample. It`s not the cleanest solution but for starting point will do

Answered By – Dmytro Usik

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *