CODEWITHSUNDEEP
dartflutterflutter-layoutflutter-animation
Rishabh
Rishabh

Reputation: 2548

Animation Of Container using Offset - Flutter

I am trying to move the container on the screen by giving begin and end offset like from Offset(0.0,0.0) to Offset(400.0,300.0). I am using Slide Transition to animate the container I am using Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0)) to move it on the screen I want to pass these Offset(400.0,300.0) and animate it.

Here is my code

class MoveContainer extends StatefulWidget {


  MoveContainer({Key key, }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new _MyMoveContainer();
  }
}

class _MyMoveContainer extends State<MoveContainer>
    with TickerProviderStateMixin {
  GlobalKey _globalKey = new GlobalKey();
  AnimationController _controller;
  Animation<Offset> _offset;
  Offset local;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    _offset =
        Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0))
            .animate(_controller);
    _offset.addListener(() {
      setState(() {});
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offset,
      child: GestureDetector(
        onPanStart: (start) {
          RenderBox getBox = context.findRenderObject();
          local = getBox.localToGlobal(start.globalPosition);
          print('point are $local');
        },
        child: Container(
            color: Colors.cyan,
            height: 200.0,
            width: 200.0,
            child: Text("hello ")),
      ),
    );
  }
}

Upvotes: 11

Views: 14461

Answers (1)

Kherel
Kherel

Reputation: 16215

Probably this question is not actual for the author. (Asked 7 months ago). But maybe my answer will help someone else.

Usually Slide Transition is used for transitions between pages. That is why, one unit of position value here is the size of one page. When you put there Offset(400.0,300.0) it's equal 400 screen right, and 300 pages down.

For your case it better to use AnimatedPositioned Widget.

enter image description here

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: MoveContainer(),
      ),
    );
  }
}

class MoveContainer extends StatefulWidget {
  @override
  _MoveContainerState createState() => _MoveContainerState();
}

class _MoveContainerState extends State<MoveContainer> {
  Offset offset = Offset.zero;
  final double height = 200;
  final double width = 200;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        RenderBox getBox = context.findRenderObject();
        setState(() {
          offset = getBox.localToGlobal(details.globalPosition);
        });
      },
      child: Stack(
        children: <Widget>[
          AnimatedPositioned(
            duration: Duration(milliseconds: 300),
            top: offset.dy - (height / 2),
            left: offset.dx - (width / 2),
            child: Container(
              color: Colors.cyan,
              height: height,
              width: width,
              child: Text("hello "),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 5

Related Questions