🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

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