Scroll on button to specific widget

readme.md

Scroll on button to specific widget

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyScrollableWidget(),
    );
  }
}

class MyScrollableWidget extends StatefulWidget {
  @override
  _MyScrollableWidgetState createState() => _MyScrollableWidgetState();
}

class _MyScrollableWidgetState extends State<MyScrollableWidget> {
  final ScrollController _scrollController = ScrollController();

  // Global keys for each widget
  final GlobalKey widget1Key = GlobalKey();
  final GlobalKey widget2Key = GlobalKey();
  final GlobalKey widget3Key = GlobalKey();
  final GlobalKey widget4Key = GlobalKey();
  final GlobalKey widget5Key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll to Widget Example'),
      ),
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          children: <Widget>[
            // Widget 1
            Container(
              key: widget1Key,
              height: 200,
              width: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Widget 1',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

            // Widget 2
            Container(
              key: widget2Key,
              height: 200,
              width: 200,
              color: Colors.green,
              child: Center(
                child: Text(
                  'Widget 2',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

            // Widget 3
            Container(
              key: widget3Key,
              height: 200,
              width: 200,
              color: Colors.red,
              child: Center(
                child: Text(
                  'Widget 3',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

            // Widget 4
            Container(
              key: widget4Key,
              height: 200,
              width: 200,
              color: Colors.yellow,
              child: Center(
                child: Text(
                  'Widget 4',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

            // Widget 5
            Container(
              key: widget5Key,
              height: 200,
              width: 200,
              color: Colors.orange,
              child: Center(
                child: Text(
                  'Widget 5',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // Button 1
          FloatingActionButton(
            onPressed: () {
              _scrollToKey(widget1Key);
            },
            child: Text('1'),
          ),

          // Button 2
          FloatingActionButton(
            onPressed: () {
              _scrollToKey(widget2Key);
            },
            child: Text('2'),
          ),

          // Button 3
          FloatingActionButton(
            onPressed: () {
              _scrollToKey(widget3Key);
            },
            child: Text('3'),
          ),

          // Button 4
          FloatingActionButton(
            onPressed: () {
              _scrollToKey(widget4Key);
            },
            child: Text('4'),
          ),

          // Button 5
          FloatingActionButton(
            onPressed: () {
              _scrollToKey(widget5Key);
            },
            child: Text('5'),
          ),
        ],
      ),
    );
  }

  void _scrollToKey(GlobalKey key) {
  final RenderBox renderBox = key.currentContext!.findRenderObject() as RenderBox;
  final Offset offset = renderBox.localToGlobal(Offset.zero);

  _scrollController.animateTo(
    offset.dy,
    duration: Duration(seconds: 1),
    curve: Curves.easeInOut,
  );
}


}