ویجت 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 قرار داده بودیم پر می کنیم و سپس عکس وقتی بارگذاری شود جای خود را به ان می دهد به خروجی زیر دقت کنید

باز هم مثال می خواهید به روی چشم :)

یکم پیچیده تره ولی با مثال بالایی فرقی نداره دوست دارم برای تمرین ان را بزنید و خروجی اش را ببینید و حتما یادتون نره کد را یاد بگیرید حتی اگر کپی می کنید

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);
        },
      ),
    );
  }
}

به همین سادگی به همین خوشمزگی.

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)

نوشته شده توسط پژمان حاجی حیدری یک علاقه مند به برنامه نویسی