CODEWITHSUNDEEP
flutterflutter-animation
user3038457
user3038457

Reputation: 185

Slide widgets off screen in flutter

I currently have a Widget that has three elements -- two buttons and a text input. On text input focus I would like to slide the buttons off the screen and expand the text input to occupy the remaining width.

Are there any flutter components (animation or otherwise) I can use to slide components off screen and animate the text field expansion?

Upvotes: 4

Views: 9635

Answers (2)

Hairy Ass
Hairy Ass

Reputation: 338

The answer it to use transform

You need to add 

dependencies:
  flutter_sequence_animation:

in pubspec.yaml

import 'package:flutter/material.dart';
import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController controller;
  SequenceAnimation sequenceAnimation;
  void initAnimation() {
    double screenSize = 500; // MediaQuery.of(context).size.width;

    controller = AnimationController(vsync: this);
    sequenceAnimation = SequenceAnimationBuilder()
        .addAnimatable(
          animatable: Tween<double>(begin: screenSize, end: -100),
          from: const Duration(milliseconds: 0),
          to: const Duration(milliseconds: 5000),
          tag: 'margin-slide',
          curve: Curves.easeInOutCirc,
        )
        .addAnimatable(
          animatable: Tween<double>(begin: 1.0, end: 0.0),
          from: Duration(milliseconds: 0),
          to: Duration(milliseconds: 5000),
          curve: Curves.easeInOutCirc,
          tag: 'fade-in',
        )
        .animate(controller);
    controller.forward();

  }

  @override
  void initState() {
    super.initState();
    initAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, child) => Opacity(
          opacity: sequenceAnimation['fade-in'].value,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                transform: Matrix4.translationValues(sequenceAnimation["margin-slide"].value, 0.0, 0.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

user3038457
user3038457

Reputation: 185

I ended up using an Animatable widget

https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget

And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()

edit

I don't have access to the computer with the source code anymore, but you should be able to infer how to construct such a widget from the Flutter example gallery https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/drawer_demo.dart (this is how I was able to learn - specifically, look at the drawerdetails animation). I positioned the textfield and buttons in the same stack and animated the textfield size as well as the button position simultaneously

Upvotes: 3

Related Questions