Flutter Web : Scroll to specific widget on click

Viewed 630

enter image description here

In above gif i have simple layout , on left side have iconButton and other side have Container with some color.

I don't know how to scroll to container when i click on iconButton. In javascript/jquery we can use id to specific content, then when click of button we can go to specific content depend of id using offset this is the reference.

How i can do the same thing but in flutter web side ?

Layout


class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mqHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Row(
            children: [
              if (sizes.checkLayoutBuilder(constraints) == TypeLayout.Mobile)
                SizedBox()
              else
                Flexible(
                  fit: FlexFit.tight,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.purple),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        FittedBox(
                          child: IconButton(
                            onPressed: () => '',
                            icon: Icon(
                              Icons.home,
                              color: Colors.white,
                            ),
                            tooltip: 'Welcome',
                          ),
                        ),
                        IconButton(
                          onPressed: () => '',
                          icon: Icon(
                            Icons.star,
                            color: Colors.white,
                          ),
                          tooltip: 'Portfolio',
                        ),
                        IconButton(
                          onPressed: () => '',
                          icon: Icon(
                            Icons.person,
                            color: Colors.white,
                          ),
                          tooltip: 'Want know about me ?',
                        ),
                      ],
                    ),
                  ),
                ),
              Flexible(
                fit: FlexFit.tight,
                flex: 10,
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Container(height: mqHeight, color: Colors.orange),
                      Container(height: mqHeight, color: Colors.indigo),
                      Container(height: mqHeight, color: Colors.lime),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
  TypeLayout checkLayoutBuilder(BoxConstraints constraints) {
    final maxWidth = constraints.maxWidth;
    TypeLayout typeLayout;
    if (maxWidth < 600) {
      typeLayout = TypeLayout.Mobile;
    } else if (maxWidth > 600 && maxWidth < 768) {
      typeLayout = TypeLayout.LargeMobile;
    } else if (maxWidth > 768 && maxWidth < 992) {
      typeLayout = TypeLayout.Tablet;
    } else if (maxWidth > 992 && maxWidth < 1200) {
      typeLayout = TypeLayout.Laptop;
    } else if (maxWidth > 1200) {
      typeLayout = TypeLayout.Desktop;
    }
    return typeLayout;
  }
}

0 Answers
Related