[FLUTTER] Прокрутка изменяет вкладки

Question

Я хочу создать этот пользовательский интерфейс, где вкладки меняются на определенной точке прокрутки. Скажите, пожалуйста, как мне подойти, есть ли уже доступный пакет?

ССЫЛКА:

https://www.youtube.com/watch?v=LrOR5QOCHBI

Answer 1

Отметьте это, вы получите представление о том, что делать https://dartpad.dev/a1d76ac8c733a492995538730d0fc2df

По сути, я создал строку, которая может отслеживать текущую вкладку. Теперь представление списка имеет элемент фиксированного размера. Теперь по прокрутке мы вычисляем, какая вкладка должна быть выделена.

    import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({ Key key }) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int currTab=0;
  ScrollController _scrollController;

  @override
void initState() {
  super.initState();
  _scrollController = ScrollController()
    ..addListener(() {
      //print("offset = ${_scrollController.offset}");
       currTab=(_scrollController.offset)~/(100*30);
      print(currTab);
      setState(() {

      });

  });
}


  @override
void dispose() {
  _scrollController.dispose(); // it is a good practice to dispose the controller
  super.dispose();
}


  @override
  Widget build(BuildContext context) {
    return 

      Column(

    children: <Widget>[
      Row(
              children: <Widget>[
                for(int i=0;i<5;i++)
                  Container(
                    decoration: new BoxDecoration(
              color:  i==currTab?Colors.red:Colors.blue,
              borderRadius: new BorderRadius.all(Radius.circular(10.0)
              )),
                    width: 100, child: Text("Tab "+i.toString(),style: TextStyle(color: Colors.white),textAlign: TextAlign.center,))
              ],

              ),
      Expanded(
        child: ListView(
    controller: _scrollController, 
    children: <Widget>[
      for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 0 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 1 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 2 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 3 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 4 -"+ i.toString())),
    ],
  )
      ),

    ],)
       ;
  }
}