flutter – Animated align

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.purple),
        home: const StateExample()
    );
  }
}

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

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

class _StateExampleState extends State<StateExample> {
  bool isBottomLeft = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xFFF5F5F5),
        appBar: AppBar(
            title: const Text("Flutter - Animated Align")
        ),
        body: bodyContent()
    );
  }


  bodyContent(){
    return Column(
      children: [
        ElevatedButton(
          child : const Text("Animate Align"),
          onPressed: (){
            setState(() {
              isBottomLeft= !isBottomLeft;
            });
          },
        ),
        Expanded(child: Container(
          color: Colors.black12,
          child: AnimatedAlign(
            alignment: isBottomLeft? Alignment.bottomLeft
                : Alignment.topRight,
            duration: const Duration(seconds: 3),
            curve: Curves.fastOutSlowIn,
            child: Container(
              width: 75,
              height: 75,
              color: Colors.pink,
            ),
          ),
        ))
      ],
    );
  }
}

More flutter tutorials

• flutter – PageView builder
• flutter – AlertDialog example
• flutter – AlertDialog scrollable
• flutter – AlertDialog shape
• flutter – Align example
• flutter – Align exact position
• flutter – Container transform rotation
• flutter – BoxDecoration example
• flutter – Chip example
• flutter – Container circle border
• flutter – Container gradient border
• flutter – Transparent status bar
• flutter – How to show hide status bar
• flutter – AppBar center title
• flutter – MaterialApp theme