🚀 FLUTTER - Profil resmine tıklanınca whatsapp gibi popup şeklinde büyütür Hero animation with an AlertDialog kullanımı

Ramazan HABER / FLUTTER / Profil resmine tıklanınca whatsapp gibi popup şeklinde büyütür Hero animation with an AlertDialog kullanımı

1-) FLUTTER - Profil resmine tıklanınca whatsapp gibi popup şeklinde büyütür Hero animation with an AlertDialog kullanımı

kaynak : https://github.com/flutter/flutter/issues/10667

kaynak : https://stackoverflow.com/questions/44403417/hero-animation-with-an-alertdialog/44404763?noredirect=1#comment75849528_44404763

Ekran Görüntüsü

1. ProfilHeroAnimation.dart

import 'package:flutter/material.dart';

class ProfilHeroAnimation<T> extends PageRoute<T> {
  ProfilHeroAnimation({ required this.builder }) : super();

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => true;

  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);

  @override
  bool get maintainState => true;

  @override
  Color get barrierColor => Colors.black54;

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return new FadeTransition(
        opacity: new CurvedAnimation(
            parent: animation,
            curve: Curves.easeOut
        ),
        child: child
    );
  }

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  // TODO: implement barrierLabel
  String? get barrierLabel => "throw UnimplementedError()";

}

2. AlertDialog function

void alertDialog() {
  Navigator.push(
    context,
    new ProfilHeroAnimation(
      builder: (BuildContext context) {
        return new Center(
          child: new AlertDialog(
            title: new Text('You are my hero.'),
            content: new Container(
              child: new Hero(
                tag: 'profilFoto',
                child: new Container(
                  height: 300.0,
                  width: 300.0,
                  child: circleAvatar,
                ),
              ),
            ),
            actions: <Widget>[
              new FloatingActionButton(
                child: new Text('RAD!'),
                onPressed: Navigator.of(context).pop,
              ),
            ],
          ),
        );
      },
    ),
  );
}

3. Circle Avatar Widget

Hero(
tag: "profilFoto",
child: getCircleAvatar(),
),

late CircleAvatar circleAvatar;

Widget getCircleAvatar(){
circleAvatar = CircleAvatar(
backgroundImage: AssetImage("assets/icons/personicon.png"),
);

return circleAvatar;
}

4. BU GÜZEL ALERTDİALOGUN ARKAPLANINI SİLER

void alertDialog(Image image) {
  Navigator.push(
    context,
    new ProfilHeroAnimation(
      builder: (BuildContext context) {
        return new Center(
          child: new AlertDialog(
            backgroundColor: Colors.transparent,
            title:null,
            content: new Hero(
              tag: 'profilFoto',
              child: new Container(
                height: 300.0,
                width: 300.0,
                child: image,
              ),
            ),
            actions:null,
          ),
        );
      },
    ),
  );
}

5. BU GÜZEL ALERTDİALOGUN ARKAPLANINI SİLER ve KÖŞELERİNİ YUVARLAR

void resimBuyut(Image image) {
  Navigator.push(
    context,
    new ProfilHeroAnimation(
      builder: (BuildContext context) {
        return new Center(
          child: new AlertDialog(
            backgroundColor: Colors.transparent,
            title:null,
            content: new Hero(
              tag: 'profilFoto',
              child: new Container(
                height: 300.0,
                width: 300.0,
                child: Card(
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: image,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  elevation: 5,
                  margin: EdgeInsets.all(10),
                ),
              ),
            ),
            actions:null,
          ),
        );
      },
    ),
  );
}

2022 Kasım 16 Çarşamba
305