how to achieve this kind of slide effect without leaving the current view in flutter

Question

Im new to flutter so I found it hard to master animations , can any one help me to add a transition effect between the two listViews thanks in advance :v here is my code and a the result am aiming And the code am working on

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    int pageIndex = 1;
    Widget firstPage = ListView.builder(
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text("item $index"),
          onTap: () => setState(() => pageIndex = 2),
        );
      },
    );
    Widget secondePage = ListView.builder(
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text("SubItem $index"),
        );
      },
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Page 1"),
      ),
      body: pageIndex == 1 ? firstPage : secondePage,
    );
  }
}

Answer 1

of cause my example is not ideal but just as an option

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JustPage(title: 'Initial title'),
    );
  }
}

class JustPage extends StatefulWidget {
  final String _initialTitle;

  JustPage({@required String title}) : this._initialTitle = title;

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

class _JustPageState extends State<JustPage> {
  StreamController<int> _streamController;
  PageController _pageController;
  String _currentTitle;

  @override
  void initState() {
    _streamController = StreamController<int>();
    _pageController = PageController()..addListener(() => _streamController.add(_pageController.page.toInt()));
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: StreamBuilder(
          initialData: 0,
          stream: _streamController.stream,
          builder: (context, snapshot) {
            return Text(snapshot.data == 0 ? widget._initialTitle : _currentTitle);
          },
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => _onBackArrowTap(),
        ),
      ),
      body: PageView.builder(
        physics: const NeverScrollableScrollPhysics(),
        controller: _pageController,
        itemBuilder: (context, index) {
          if (index == 0) {
            return ListView.builder(
              key: PageStorageKey('Page1'),
              itemExtent: 80,
              itemCount: 50,
              itemBuilder: (context, index) {
                final title = 'Page 1, item $index';
                return GestureDetector(
                  child: Container(
                    alignment: Alignment.centerLeft,
                    color: Colors.green[100],
                    child: Text(title),
                  ),
                  onTap: () => _animateToPageWithTitle(1, title),
                );
              },
            );
          } else {
            return ListView.builder(
              key: PageStorageKey('Page2'),
              itemExtent: 56,
              itemCount: 50,
              itemBuilder: (context, index) {
                return Container(
                  alignment: Alignment.centerLeft,
                  color: Colors.teal[100],
                  child: Text('Page 2, item $index'),
                );
              },
            );
          }
        },
      ),
    );
  }

  _animateToPageWithTitle(int index, String title) {
    _currentTitle = title;
    return _pageController.animateToPage(index, curve: Curves.linear, duration: const Duration(milliseconds: 250));
  }

  _onBackArrowTap() {
    if (_pageController.page == 0) {
      // Navigator.pop bla bla
    } else {
      _animateToPageWithTitle(0, widget._initialTitle);
    }
  }
}

Answer 2

Try to used this package.. add this dependency into pubspec.yaml. in dependency section.

  page_transition: ^1.1.0

after when change screen then call this way..

          Navigator.push(
              context,
              PageTransition(
                  type: PageTransitionType.rightToLeft,
                  child: MyDetails()));