SHARE
TWEET

Untitled

a guest Jun 12th, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import 'package:flutter/material.dart';
  2.  
  3. void main() => runApp(MyApp());
  4.  
  5. class MyApp extends StatelessWidget {
  6.   // This widget is the root of your application.
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: 'Flutter Demo',
  11.       home: MyHomePage(),
  12.       debugShowCheckedModeBanner: false,
  13.     );
  14.   }
  15. }
  16.  
  17. class MyHomePage extends StatelessWidget {
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     return Scaffold(
  21.       appBar: AppBar(
  22.         title: Text("Tab Bar Concept"),
  23.         elevation: 0,
  24.       ),
  25.       body: Container(
  26.         child: CustomTabBar(),
  27.       ),
  28.     );
  29.   }
  30. }
  31.  
  32. class CustomTabBar extends StatefulWidget {
  33.   @override
  34.   _CustomTabBarState createState() => _CustomTabBarState();
  35. }
  36.  
  37. class _CustomTabBarState extends State<CustomTabBar> with TickerProviderStateMixin {
  38.   GlobalKey stackKey = GlobalKey();
  39.   GlobalKey asapKey = GlobalKey();
  40.   GlobalKey todayKey = GlobalKey();
  41.   GlobalKey bookingKey = GlobalKey();
  42.   GlobalKey indicatorKey;
  43.   Rect indicatorRect = Rect.zero;
  44.  
  45.   AnimationController controller;
  46.   CurvedAnimation curve;
  47.   RectTween tween;
  48.   Animation<Rect> animation;
  49.  
  50.   @override
  51.   void initState() {
  52.     super.initState();
  53.     indicatorKey = asapKey;
  54.  
  55.     controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
  56.     curve = CurvedAnimation(parent: controller, curve: Curves.easeOutQuad);
  57.     tween = RectTween(begin: Rect.zero, end: Rect.zero);
  58.     animation = tween.animate(curve);
  59.  
  60.     WidgetsBinding.instance.addPostFrameCallback((Duration duration) {
  61.       final ancestor = stackKey.currentContext.findRenderObject();
  62.       final RenderBox renderBox = indicatorKey.currentContext.findRenderObject();
  63.       final offset = renderBox.localToGlobal(Offset.zero, ancestor: ancestor);
  64.       setState(() {
  65.         indicatorRect = offset & renderBox.size;
  66.         animation = RectTween(begin: indicatorRect, end: indicatorRect).animate(curve);
  67.       });
  68.     });
  69.   }
  70.  
  71.   @override
  72.   void dispose() {
  73.     controller.dispose();
  74.     super.dispose();
  75.   }
  76.  
  77.   void animate({@required GlobalKey to}) async {
  78.     final ancestor = stackKey.currentContext.findRenderObject();
  79.     final RenderBox renderBox = to.currentContext.findRenderObject();
  80.     final offset = renderBox.localToGlobal(Offset.zero, ancestor: ancestor);
  81.     final toRect = offset & renderBox.size;
  82.     animation = RectTween(begin: indicatorRect, end: toRect).animate(curve);
  83.     await controller.forward(from: 0).orCancel;
  84.     indicatorRect = toRect;
  85.     indicatorKey = to;
  86.   }
  87.  
  88.   @override
  89.   Widget build(BuildContext context) {
  90.     return Container(
  91.       height: 48,
  92.       color: Colors.red,
  93.       padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  94.       child: Stack(
  95.         key: stackKey,
  96.         children: <Widget>[
  97.           AnimatedBuilder(
  98.             animation: controller,
  99.             builder: (BuildContext context, Widget child) {
  100.               return Positioned.fromRect(
  101.                 rect: animation.value,
  102.                 child: Container(
  103.                   decoration: BoxDecoration(
  104.                     color: Colors.white,
  105.                     borderRadius: BorderRadius.circular(16),
  106.                   ),
  107.                 ),
  108.               );
  109.             },
  110.           ),
  111.           Row(
  112.             children: <Widget>[
  113.               FlatButton(
  114.                 key: asapKey,
  115.                 splashColor: Colors.transparent,
  116.                 highlightColor: Colors.transparent,
  117.                 child: Text(
  118.                   "ASAP",
  119.                   style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
  120.                 ),
  121.                 onPressed: () => animate(to: asapKey),
  122.               ),
  123.               Expanded(
  124.                 key: todayKey,
  125.                 child: FlatButton(
  126.                   splashColor: Colors.transparent,
  127.                   highlightColor: Colors.transparent,
  128.                   child: Text(
  129.                     "Today's booking",
  130.                     style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
  131.                   ),
  132.                   onPressed: () => animate(to: todayKey),
  133.                 ),
  134.               ),
  135.               FlatButton(
  136.                 key: bookingKey,
  137.                 splashColor: Colors.transparent,
  138.                 highlightColor: Colors.transparent,
  139.                 child: Text(
  140.                   "Booking",
  141.                   style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
  142.                 ),
  143.                 onPressed: () => animate(to: bookingKey),
  144.               ),
  145.             ],
  146.           ),
  147.         ],
  148.       ),
  149.     );
  150.   }
  151. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top