flutter moving container from outside of screen to on screen with container size

user_1830228 0
Viewed 1287

in this sample code i want to make container with for example 100.0 size of height and move that into screen by animation to show that, like with simple bottom sheet, this sample code work but its not what i want to have

  1. problem is moving that into screen with size of container witch that is 100.0 on our sample

  2. start animation from bottom height of container into screen

for example:

enter image description here

in this sample code animate move container to top of screen not size of that

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page(),
      );
  }
}

class Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<Page> with SingleTickerProviderStateMixin {
  Tween<Offset> tween = Tween<Offset>(
    begin: Offset(0.0, 10000.0),
    end: Offset(0.0, 0.0),
    );
  Animation<Offset> animation;
  AnimationController animationController;

  GlobalKey _widgetKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
      );
    animation = tween.animate(animationController);

    Future<void>.delayed(Duration(seconds: 1), () {
      final Size screenSize = MediaQuery.of(context).size;
      final RenderBox widgetRenderBox =
      _widgetKey.currentContext.findRenderObject();
      final Size widgetSize = widgetRenderBox.size;
      final double offset = (screenSize.height / 2 / widgetSize.height).ceilToDouble();
      tween = Tween<Offset>(
        begin: Offset(0.0, offset),
        end: Offset(0.0, 0.0),
        );
      animation = tween.animate(animationController);
      this.setState((){
        animationController.forward();
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ddddddd'),),
      body: Stack(
        alignment: Alignment.center,
        fit: StackFit.loose,
        children: <Widget>[
          SlideTransition(
              position: animation,
              child: Container(
                key: _widgetKey,
                  height:100.0,
                  width: 300.0,
                  color:Colors.indigo,
                  child:Center(
                    child:Text('ddddddddddddd'),
                    )
                  )
              ),
        ],
        ),
      );
  }
}
flutter-animation flutter-layout flutter
1 Answers

I hope I did not misunderstood your question.

  1. The Stack should have the size of the whole screen. Wrap it with SizedBox for example.
  2. No need to center the text. You should rather align it inside the Container itself.
  3. The container should have the width of the screen.
  4. The height of the container is not necessary and therefore we don't need to figure it out.

This works for me:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Page(),
    );
  }
}

class Page extends StatefulWidget {
  const Page({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<Page> with SingleTickerProviderStateMixin {
  late final AnimationController _animationController =
      AnimationController(vsync: this, duration: const Duration(seconds: 2));
  late final Animation<Offset> _animation =
      Tween<Offset>(begin: const Offset(0, 1), end: const Offset(0, 0))
          .animate(_animationController);

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

  void delayedStart() async {
    await Future.delayed(const Duration(seconds: 2), () {
      _animationController.forward();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ddddddd'),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          alignment: Alignment.bottomCenter,
          fit: StackFit.loose,
          children: <Widget>[
            SlideTransition(
              position: _animation,
              child: Container(
                alignment: Alignment.center,
                height: 100,
                width: MediaQuery.of(context).size.width,
                color: Colors.indigo,
                child: const Text('ddddddddddddd')
              )
            ),
          ],
        ),
      ),
    );
  }
}
user_164638010
Related