ویجت 14 (FadeInImage در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی FadeInImageبعضی مواقع نیاز داره که مثلا عکسی از اینترنت دانلود شه خوب توی این مدت بارگذاری نیاز داری که جای خالی این تصویر را تا قبل بارگذاری پر کنی و سپس وقتی تصویر به دست امده با حالت انیمیشن روان به کاربر نمایش داده شود خوب نگران نباشید این کار ها را بسپارید به این ویجت دوست داشتنیبی وقفه بریم سراغ کدimport 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Fade in images'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: FadeInImage.assetNetwork( placeholder: 'assets/loading.gif', image: 'https://picsum.photos/250?image=9', ), ), ), ); } }با استفاده از placeholder جای ان را با فایل گیف که در asset قرار داده بودیم پر می کنیم و سپس عکس وقتی بارگذاری شود جای خود را به ان می دهد به خروجی زیر دقت کنیدباز هم مثال می خواهید به روی چشم :) https://media.giphy.com/media/lp84cYEUoOyh0LBEbt/giphy.gif یکم پیچیده تره ولی با مثال بالایی فرقی نداره دوست دارم برای تمرین ان را بزنید و خروجی اش را ببینید و حتما یادتون نره کد را یاد بگیرید حتی اگر کپی می کنید import 'package:flutter/material.dart'; import 'package:flutter/painting.dart' as painting; import 'package:flutter_widget_guide/utils.dart'; import 'package:transparent_image/transparent_image.dart'; class FadeInImageWidget extends StatefulWidget { @override _FadeInImageWidgetState createState() => _FadeInImageWidgetState(); } class _FadeInImageWidgetState extends State<FadeInImageWidget> { String _url = &quothttps://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350" @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Container( child: Center( child: Text( 'FadeInImage Widget', style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), ), ), margin: EdgeInsets.only(right: 48), ), ), ///Will pop scope is used to detect if the user pressed back button body: WillPopScope( child: Stack(children: <Widget>[ ///We can choose to show an indicator as well to let user know that ///something is being loaded Center( child: CircularProgressIndicator( ///this is to specify the color of the CircularProgressIndicator valueColor: AlwaysStoppedAnimation<Color>(Colors.blue))), Center( child: Container( child: FadeInImage.memoryNetwork( ///Specifying dimensions of the image before and after ///loading height: 350, width: 350, ///we are using the transparent_image package ///to show a transparent image as a placeholder. placeholder: kTransparentImage, image: _url), ), ), ]), onWillPop: () { ///clear image cache and exit screen ///this is done so that the image loads every time you open the ///screen. (it is cached otherwise) painting.imageCache.clear(); Navigator.of(context).pop(true); }, ), ); } }به همین سادگی به همین خوشمزگی.اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)نوشته شده توسط پژمان حاجی حیدری یک علاقه مند به برنامه نویسی