How to connect a menu item to a container through scroll property in flutter i.e. an anchor in html - flutter

Question

Hello everyone I am new to flutter and I am facing a difficulty in my website development. I have three different classes:
Main menu (which is not in my Navbar but a row in my body widget)
Menu Items ( dropdown item of a menu item)
Carousel slider (item in my body widget)
I want to connect a sub menu item to my carousel slider container using an 'OnTap' function in the sub menu class. It seems the only solution is to combine the widgets but I don't want to since they are not supposed to be close but just linked via a click. In few words I am in search of codes where we have a click on a menu sub-item and the screen context scrolls down to the specific item on the canvas without changing page.
Here a code example:
//my main class
import 'package:flutter/material.dart';
import 'package:navigation_scroll/widgets/view/homePage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
//my homePage class
import 'package:flutter/material.dart';
import 'package:navigation_scroll/widgets/carousels/carouselOne.dart';
import 'package:navigation_scroll/widgets/carousels/carouselTwo.dart';
import 'package:navigation_scroll/widgets/menu/dropDownMenu.dart';
class MyHomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyHomePageState();
}
}
//where you have the combination of all the widgets
class MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(child: Text("ListView")),
),
body: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 30.0,
),
Container(
child:ListViewDemo(),
),
SizedBox(
height: 50.0,
),
Container(
child: CarouselOne()),
SizedBox(
height: 50.0,
),
Container(
child: CarouselTwo()),
],
),
)
);
}
}
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
// this is the first carousel that appears on screen
class CarouselOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CarouselSlider(
items: [
//1st Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//4th Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//5th Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 180.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
);
}
}
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
// this is the second carousel that appears on screen
class CarouselTwo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CarouselSlider(
items: [
//1st Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//4th Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
//5th Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://cdn.eso.org/images/thumb300y/eso1907a.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 180.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
);
}
}
import 'package:flutter/material.dart';
// this is the dropdown menu from which we select and want to arrive at the carousel slider
class ListViewDemo extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return ListViewDemoState();
}
}
class ListViewDemoState extends State<ListViewDemo> {
List<String> selectedItemValue = List<String>();
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
height: 50.0,
child: ListView (
children: [
Center(
child: DropdownButton(
//value:'ABOUT',
onChanged: (value) { },
items: [
DropdownMenuItem(
child: GestureDetector(
child: Text(
'VISION'
),
onTap: (){}, // we need to write a function here that does what we want to a container in the carousel slider
),
),
DropdownMenuItem(
child: Text(
'MISSION'
),
onTap: (){}, // we need to write a function here that does what we want to a container in the carousel slider
),
DropdownMenuItem(
child: Text(
'TEAM'
),
onTap: (){}, // we need to write a function here that does what we want to a container in the carousel slider
),
],
),
),
],
)
);
}
}

Answer 1

I think you can achieve this with CarouselSlider controller you can trigger it onTap and scroll it to your desired destination

Answer 2

This can be achieved using CarouselController attached with your CarouselSlider.
On Button/Menu click, you just need to call
carouselController.jumpToPage(whateverYourTargetedPageNoInInt);