ফ্লাটারে ইমেজ

ফ্লাটার অ্যাপে ইমেজ যোগ করার জন্য রয়েছে ইমেজ উইজেট। লোকাল অথবা যে কোন URL থেকে আমরা ইমেজ দেখাতে পারি। প্রথমে দেখি কিভাবে URL থেকে ইমেজ দেখানো যায়। যার জন্য এভাবে লিখতে পারিঃ

Image.network("https://picsum.photos/500")

এতটুকুই। সম্পূর্ণ অ্যাপঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image.network("https://picsum.photos/500")
        ),
      ),
    );
  }
}

এখন যে ইমেজটা আমরা লোড করব, তা অনেক বড় হতে পারে। অ্যাপে সুন্দর ভাবে নাও দেখাতে পারে। আর তাই বিভিন্ন প্রোপার্টি ব্যবহার করে অ্যাপে প্রয়োজন অনুযায়ী ইমেজটা দেখাবো। তার জন্য উইথ এবং হাইট সেট করব। আবার ইমেজটা কিভাবে বক্সের ভেতর ফিট হবে, তাও বলে দিতে পারি। যেমনঃ

Image.network(
            "https://picsum.photos/500",
            width: 300,
            height: 200,
            fit: BoxFit.cover,
          ),

অ্যাপ থেকে লোকাল ইমেজ দেখানো

লোকাল ইমেজ লোড করার জন্য প্রথমে ইমেজটা assets ফোল্ডারে রাখতে হবে। ডিফল্ট ভাবে assets ফোল্ডার তৈরি করা থাকে না। প্রজেক্টের রুট ডিরেক্টরিতে assets নামক একটা ডিরেক্টরি / ফোল্ডার তৈরি করে নিব। এরপর pubspec.yaml ফাইল ওপেন করব। এরপর এখানে ইমেজ এসেটটা যোগ করতে হবে। যেমন cactus.jpg নামক একটা ইমেজ রেখেছি assets ফোল্ডারে। তা যোগ করার জন্য লিখবঃ

flutter:
  assets:
    - assets/cactus.jpg

এবার ইমেজটা অ্যাপে দেখাতে পারব। তার জন্য লিখবঃ

Image.asset("assets/cactus.jpg")

তাহলে আমরা দেখতে পাবো অ্যাপে ইমেজটি দেখাচ্ছে। এরপর প্রয়োজন অনুযায়ী বিভিন্ন প্রোপার্টি যোগ করে নিতে পারব। যেমন উইথ, হাইট ইত্যাদি এভাবে যোগ করতে পারিঃ

Image.asset(
          "assets/cactus.jpg",
          width: 300,
          height: 200,
          fit: BoxFit.cover,
        )),

ইমেজে কর্নার রেডিয়াস

ইমেজে কর্ণার রেডিয়াস যোগ করতে চাইলে ইমেজ উইজেট ClipRRect উইজেটে র‍্যাপ করে নিতে হবে। এরপর যে কোন সাইজের র‍্যাডিয়াস যোগ করতে পারব।

ClipRRect(
          borderRadius: BorderRadius.circular(20), // Round corners
          child: Image.network(
            "https://picsum.photos/500",
            width: 300,
            height: 200,
            fit: BoxFit.cover,
          ),
        ),