Animate multiple widgets on same screen flutter - animation

Question

I need slide animation from left to right and vice versa.
Can anyone give me any guidance which widget i should use in it?
I have tried a few thing like :- carousel_slider, transformer_pageview, page_transformer
I used SlideTransition class, but it is not giving me expected result, I have also tried different range/values of OffSet but no luck.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
class HomePage extends StatefulWidget {
const HomePage({Key key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offsetAnimation;
AnimationController _controllerTwo;
Animation<Offset> _offsetAnimationTwo;
#override
void initState() {
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_offsetAnimation = Tween<Offset>(
begin: const Offset(-0.00001, 0.0),
end: const Offset(0.09, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));
_controllerTwo = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_offsetAnimationTwo = Tween<Offset>(
begin: const Offset(-0.85, 0.0),
end: const Offset(-0.00001, 0.0),
).animate(CurvedAnimation(
parent: _controllerTwo,
curve: Curves.easeInOut,
));
super.initState();
}
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: new GestureDetector(
onHorizontalDragUpdate: (details) {
if (details.primaryDelta > 0) {
_controller..reverse();
_controllerTwo..reverse();
}
if (details.primaryDelta < 0) {
_controller..forward();
_controllerTwo..forward();
}
print(details.primaryDelta);
},
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SlideTransition(
position: _offsetAnimationTwo,
child: Card(
color: Colors.black54,
child: Container(),
),
),
Flexible(
child: SlideTransition(
position: _offsetAnimation,
child: Container(
child: SlidingUpPanel(
renderPanelSheet: false,
panel: _floatingStatement(),
body: CardsStack(context),
),
),
),
),
],
),
),
)
],
);
}
Widget _floatingStatement() {
return Container(
margin: const EdgeInsets.all(24.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(24.0)),
boxShadow: [
BoxShadow(
blurRadius: 20.0,
color: Colors.grey,
),
],
),
);
}
}
class CardsStack extends StatelessWidget {
const CardsStack(BuildContext context, {Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return new Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 20,
left: 10,
right: 10,
child: Card(
color: Colors.black54,
child: Container(),
),
),
Positioned(
top: 70,
left: 10,
right: 10,
child: Card(
color: Colors.black54,
child: Container(),
),
),
Positioned(
top: 120,
left: 10,
right: 10,
child: Card(
color: Colors.black54,
child: Container(),
),
),
],
);
}
}

Answer 1

You can use PageView to horizontally (even vertically) swipe between pages.
Or you can use TabBarView to implement it with bottom navigation.
Example code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
body: TabBarView(
children: <Widget>[
Center(child: Text("Page1")),
Center(child: Text("Page2")),
Center(child: Text("Page3")),
],
),
bottomNavigationBar: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 10.0,
),
],
),
child: TabBar(
indicatorColor: Colors.red,
indicatorWeight: 5.0,
indicatorSize: TabBarIndicatorSize.label,
labelColor: Colors.black,
tabs: <Widget>[
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.category)),
Tab(icon: Icon(Icons.account_circle)),
],
),
),
),
);
}
}