১০০+ ফ্লাটার ও ডার্ট টিপস

01 October 2023

59 min read

-----লার্নিং//

হ্যালো পাঠক/পাঠিকা,

আমার এই আরর্টিকেলটি লেখার উদ্দেশ্য হচ্ছে ১০০+ টিপস ও ট্রিক্সের একটি তালিকা তৈরি করা। আপনি যদি এই ফ্লাটার/ডার্ট-এ নতুন হয়ে থাকেন, তাহলে এখান থেকে কিছু আপনার কাজে আসতে পারে।

১. entry ব্যবহার করে আপনি নাল-সেইফ (null-safe) পদ্ধতিতে একটা ম্যাপের মধ্য দিয়ে ইটারেট করতে পারেন।

for (var entry in items.entries) {

//print the keys and values

print('${entry.key}: ${entry.value}');

}

২. লিস্টে অনেক ক্ষেত্রে ডুপ্লিকেট আইটেম থাকতে পারে। সুতরাং আপনি যদি একটি ইউনিক ভ্যালুর কালেকশন পেতে চান, আপনি এর পরিবর্তে একটি Set ব্যবহার করুন।

একটি সেটে দুইটি এলেমেন্ট সমান হতে পারে না, তাই নিচের কোডটি কম্পাইল্ড হবে না।

final citiesSet = {'Dublin', 'London', 'Paris', 'Dublin'};

৩. আপনি  Future.wait ব্যবহারের মাধ্যমে Futureএর একাধিক ফলাফল সম্পন্ন হওয়ার অপেক্ষা করতে পারেন।

class someAPI {

        Future<int> getThings() => Future.value(3000);

        Future<int> getItems() => Future.value(300);

        Future<int> getStuff() => Future.value(30);

    }

...

    final api = someAPI();

    final values = await Future.wait([

      api.getThings(),

      api.getItems(),

      api.getStuff(),

    ]);

    print(values);

৪. আপনি GridView.count ব্যবহার করে একটি গ্রিড তৈরি করতে পারেন যেটি পোর্ট্রেট মোডে ২ টাইল চওড়া এবং ল্যান্ডস্কেইপ মোডে ৩ টাইল চওড়া।

Flexible(

        child: GridView.count(

            crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,

            mainAxisSpacing: 4.0,

            crossAxisSpacing: 4.0,

            padding: const EdgeInsets.all(4.0),

            childAspectRatio:

                (orientation == Orientation.portrait) ? 1.0 : 1.3,

            children: someList

                .map(

                (catData) => aListItemWidget(catData),

                )

                .toList(),

        ),

    ),

৫. আপনি dart:math থেকে Random ব্যবহার করে একটি লিস্ট থেকে এলোমেলোভাবে অর্থাৎ র‍্যান্ডমলি যেকোনো আইটেম সিলেক্ট করতে পারেন। 

import 'dart:math';

...

    int min = 0;

    int max = someList.length - 1;

    Random rnd = new Random();

    int r = min + rnd.nextInt(max - min);

    return someList[r];

৬. ডিভাইস ওরিয়েন্টেশন লক করার জন্য আপনি সার্ভিসেস লাইব্রেরি ব্যবহার করতে পারেন।

 import 'package:flutter/services.dart';

...

    void main() async {

    await SystemChrome.setPreferredOrientations([

        DeviceOrientation.portraitUp,

    ]);

    runApp(App());

    }

৭. যেকোনো প্ল্যাটফর্ম-স্পেসিফিক কোড লিখতে আপনি dart:io library ব্যবহার করতে পারেন।

import 'dart:io' show Platform;

...

    if (Platform.isIOS) {

        doSomethingforIOS();

    }

    if (Platform.isAndroid) {

        doSomethingforAndroid();

    }

৮. যেকোনো কালারকে আপনি একটি ম্যাটেরিয়েল কালারে রূপান্তর করতে পারেন।

const Map<int, Color> color = {

    50: Color.fromRGBO(255, 207, 68, .1),

    100: Color.fromRGBO(255, 207, 68, .2),

    200: Color.fromRGBO(255, 207, 68, .3),

    300: Color.fromRGBO(255, 207, 68, .4),

    400: Color.fromRGBO(255, 207, 68, .5),

    500: Color.fromRGBO(255, 207, 68, .6),

    600: Color.fromRGBO(255, 207, 68, .7),

    700: Color.fromRGBO(255, 207, 68, .8),

    800: Color.fromRGBO(255, 207, 68, .9),

    900: Color.fromRGBO(255, 207, 68, 1),

    };

    const MaterialColor custom_color =

        MaterialColor(0xFFFFCF44, color);

৯. স্ট্যাটাস বার হাইড করার জন্য আপনি সার্ভিসেস লাইব্রেরি ব্যবহার করতে পারেন।

 import 'package:flutter/services.dart';

    void main() {

        SystemChrome.setEnabledSystemUIOverlays([]);

    }

১০. http প্যাকেজে http রিসোর্স ব্যবহার করার জন্য ফাংশান এবং ক্লাসের একটি সেট রয়েছে। নিচের উদাহরণে দেখা যাচ্ছে কিভাবে http প্যাকেজ ব্যবহার করে http রিকোয়েস্ট করা হয়।

import 'package:http/http.dart' as http;

    http.get(some_api_url).then((http.Response res) {

        final data = json.decode(res.body);

        print(data);

    });

১১. আপনি একটি ট্রান্সপারেন্ট প্লেসহোল্ডার ডিসপ্লে করার জন্য FadeInImage উইজেট এবং transparent_image প্যাকেজ ব্যবহার করতে পারেন যাতে করে এটি লোড হতে হতে ইমেজটি ফেইড হওয়ার অপেক্ষায় থাকে।

    import 'package:transparent_image/transparent_image.dart';

    ...

    FadeInImage.memoryNetwork(

        placeholder: kTransparentImage, 

        image: someImageUrl,

        fit: BoxFit.fill,

    ),

১২. TextFields-এ আইকন যুক্ত করতে হলে InputDecoration থেকে “icon”, “prefixIcon” এবং  “suffixIcon” ব্যবহার করুন।

    TextField(

    decoration: InputDecoration(

        icon: Icon(Icons.email)

        ),

    ),

    ...

    

    TextField(

    decoration: InputDecoration(

        prefixIcon: Icon(Icons.email)

        ),

    ),

    ...

    

    TextField(

    decoration: InputDecoration(

        suffixIcon: Icon(Icons.email)

        ),

    ),

১৩. TextFields-এর কার্সরটি কাস্টমাইজেবল। নিচের উদাহরণে দেওয়া কোডটি ব্যবহার করলে এটি purple কালারে রূপান্তরিত হবে।

    TextField(

        cursorColor: Colors.purple,

        cursorRadius: Radius.circular(8.0),

        cursorWidth: 8.0,

    ),

১৪. একটা রো’র চিলড্রেনগুলোকে একসাথে কাছাকাছি প্যাক করতে হলে সেটির mainAxisSizeকে MainAxisSize.min এ সেট করুন।

    Row(

        mainAxisSize: MainAxisSize.min,

        children: [

            Icon(Icons.star, color: Colors.orange[500]),

            Icon(Icons.star, color: Colors.orange[500]),

            Icon(Icons.star, color: Colors.orange[500]),

            Icon(Icons.star, color: Colors.black),

            Icon(Icons.star, color: Colors.black),

        ],

    ),

১৫. Expanded widget ব্যবহার করে আপনি একটা উইজেটকে সাইজ করে একটা রো অথবা কলামের ভিতরে ফিট করিয়ে নিতে পারবেন।

    Row(

        crossAxisAlignment: CrossAxisAlignment.center,

        children: [

            Expanded(

            child: Image.asset('images/pic1.jpg'),

            ),

            Expanded(

            child: Image.asset('images/pic2.jpg'),

            ),

            Expanded(

            child: Image.asset('images/pic3.jpg'),

            ),

        ],

    );

১৬. একটা উইজেটকে এক স্ক্রিন থেকে অন্য স্ক্রিনে অ্যানিমেট করার জন্য Hero widget ব্যবহার করুন। উদাহরণস্বরূপ, একটা আইকন উড়ে এক পেজ থেকে অন্য পেজে যাচ্ছে।

    // Page 1

    Hero(

        tag: "FlyingHero",

        child: Icon(

        Icons.party_mode_outlined,

        size: 50.0,

        ),

    ),

    ...

    

    // Page 2

    

    Hero(

        tag: "FlyingHero",

        child: Icon(

        Icons.party_mode_outlined,

        size: 150.0,

        ),

    ),

১৭. উইজেটগুলোকে ওভারল্যাপ করার জন্য Stack  ব্যবহার করুন। একদম উপরের উইজেটটি হবে একদম নিচের উইজেট এবং একদম নিচের উইজেটটি হবে একদম উপরের উইজেট।

    Stack(

        children: [

        Container(

            width: 100,

            height: 100,

            color: Colors.red,

        ),

        Container(

            width: 90,

            height: 90,

            color: Colors.green,

        ),

        Container(

            width: 80,

            height: 80,

            color: Colors.blue,

        ),

        ],

    

)

১৮. আপনার অ্যাপের ভেতরকার সব কালার, ফন্ট, শেইপ আর ডিজাইন স্টাইলের সেটকে ডিফাইন করার জন্য থিম ব্যবহার করুন। এটি এমন এক উপায় যার মাধ্যমে আপনি আপনার সকল স্টাইলিস্টিক ডিসিশনগুলোকে কেন্দ্রীভূত বা সেন্ট্রালাইজ করতে পারবেন। 

    MaterialApp(

        title: appName,

        theme: ThemeData(

        // The default brightness and colors.

        brightness: Brightness.light,

        primaryColor: Colors.lightGreen[500],

        accentColor: Colors.amber[600],

        // The default font family.

        fontFamily: 'Georgia',

        // TextTheme & text styling

        textTheme: TextTheme(

            headline1: TextStyle(fontSize: 64.0, fontWeight: FontWeight.bold),

            headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),

            bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),

        ),

        ),

        home: MyHomePage(

        title: appName,

        ),

    );

১৯. ডিবাগের ভিতরে কোনো কোড এক্সিকিউট করতে অথবা মোড রিলিজ করতে (package:flutter/foundation.dart)-এর ভেতর থেকে constant (kReleaseMode) ব্যবহার করুন।

    import 'package:flutter/foundation.dart';

    if (kReleaseMode) {

        // Release Mode

        print('release mode');

    } else {

        print('debug mode');

    }

২০. একই অবজেক্টের উপরে অপারেশান্স এর সিকোয়েন্স তৈরি করার জন্য Cascade notation ব্যবহার করুন।

    List<String> somelist = []

    ..addAll(['London', 'Dublin', 'Paris'])

    ..sort()

    ..forEach((element) => print('\n$element'));

২১. Timer class ব্যবহার করে কিছুক্ষণ পরে একটা কোডের অংশবিশেষ এক্সিকিউট করতে পারেন।

    Timer.periodic(

        Duration(seconds: 1),

        (Timer time) {

                print("time: ${time.tick}");

                if (time.tick == 10) {

                    time.cancel();

                    print('Timer Cancelled');

                }

        },

    );

২২. চাইল্ড উইজেটকে ওভাল অথবা সার্কেল শেইপে ক্লিপ করার জন্য ClipOval উইজেট ব্যবহার করুন। যদি উইড্‌থ এবং হাইট সমান হয়, তাহলে শেইপটি হবে গোলাকৃতির। আর যদি উইড্‌থ এবং হাইট আলাদা হয়, তাহলে শেইপটি হবে ওভাল।

    ClipOval(

        child: Image.network(

            imgUrl,

            fit: BoxFit.fill,

            width: 200.0,

            height: 200.0,

        ),

    );

২৩. বাম পাশে এবং ডানপাশে ক্রমানুসারে ক্যারেক্টার প্যাডিং অ্যাড করতে padLeft  এবং padRight ব্যবহার করুন।

  String s = "fun";

  print(s.padLeft(10, ',.*')); // ',.*,.*,.*,.*fun'

  print(s.padRight(10, ',.*')); // 'fun,.*,.*,.*,.*'

২৪. একটি স্ট্রিং-এ যেকোনো ধরণের লিস্টে জয়েন করতে হলে List class method join() can ব্যবহার করে জয়েন করতে পারেন।

    List<String> values = ['dart', 'flutter', 'fun'];

    print(values.join()); //  dart,flutter,fun

২৫.ডিবাগ ব্যানার ট্যাগকে রিমুভ করতে হলে debugShowCheckedModeBanner-কে False- এ সেট করুন।

    MaterialApp(

        debugShowCheckedModeBanner: false,

        // other arguments

    )

২৬. একটি লিস্টের একটি আইটেমের ইন্ডেক্সে অ্যাক্সেস পেতে হলে asMap ব্যবহার করে লিস্টটিকে একটি ম্যাপে কনভার্ট করে নিতে হবে।

    myList.asMap().entries.map((entry) {

        int idx = entry.key; // index

        String val = entry.value;

        return something;

    }

২৭. একটা অ্যাপের সবচেয়ে উপরের কম্পোনেন্ট হচ্ছে AppBar ( অথবা মাঝে মাঝে সবচেয়ে নিচের), AppBar- এর লেয়াউটে ৩টি কম্পোনেন্ট থাকেঃ লিডিং, টাইটেল এবং একশান্স।

@override

    Widget build(BuildContext context) {

      return Scaffold(

        appBar: AppBar(

          title: Text(

            'App Title',

          ),

          centerTitle: true,

          actions: [

            IconButton(

              icon: Icon(Icons.logout),

              onPressed: () {},

            ),

          ],

          backgroundColor: Colors.yellowAccent[600],

          elevation: 50.0,

          leading: IconButton(

            icon: Icon(Icons.menu),

            tooltip: 'Menu Icon',

            onPressed: () {},

          ), //IconButton

          brightness: Brightness.dark,

        ),

        body: const Center(

          child: Text(

            "Enjoy",

            style: TextStyle(fontSize: 24),

          ), //Text

        ), //Center

      ); //Scaffold;

    }

২৮.যেকোনো ডার্ট প্রোগ্রাম লিখতে হলে, হোক সেটি কোনো স্ক্রিপ্ট অথবা কোনো ফ্লাটার অ্যাপ, আপনাকে অবশ্যই একটি ফাংশানকে ডিফাইন করতে হবে যেটা হলো main()। এটি হচ্ছে সকল অ্যাপের এন্ট্রি পয়েন্ট।

    void main() {

    var list = ['London', 'Dublin', 'Paris'];

    list.forEach((item) {

        print('${list.indexOf(item)}: $item');

    });

    }

২৯. প্রেস করার পরে একটি বাটনের কালার পরিবর্তন করতে পারেন।

    TextButton(

        onPressed: () {},

        style: ButtonStyle(

        foregroundColor: MaterialStateProperty.resolveWith<Color>(

            (Set<MaterialState> states) {

            if (states.contains(MaterialState.pressed)) return Colors.pink;

            return null; // Defer to the widget's default.

        }),

        ),

        child: Text(

        'Change My Color',

        style: TextStyle(fontSize: 30),

        ),

    ),

৩০. নিচের উদাহরণটি একটি GetX ডায়লগ ডিসমিস করার পরে একটি কোড রান করা দেখায়।

    Get.dialog(MyAlert()).then(

        (value) => runSomeCode(),

    );

৩১. Enums এবং এক্সটেনশন মেথড কোডকে পড়ার মত পরিচ্ছন্ন করতে পারে। নিচের উদাহরণে আমরা Enums কে Strings এ রূপান্তর করছি।

 enum Cities { London, Dublin, Paris }

    extension ToString on Cities {

    String get name => toString().split('.').last;

    }

    void main() {

    print(Cities.London.name);

    print(Cities.Dublin.name);

    print(Cities.Paris.name);

    }

৩২. ডার্টে আপনি একটি callable ক্লাস বানাতে পারেন যাতে আপনি ফাংশন হিসেবে ক্লাসের একটি ইন্সট্যান্সকে কল করতে পারেন।

class WelcomeToTheCity {

    // Defining call method

    String call(String a, String b, String c) => 'Welcome to $a$b$c';

    }

    void main() {

    var welcome_to_city = WelcomeToTheCity();

    // Calling the class through its instance

    var welcome_msg = welcome_to_city('SanDiego ', 'CA ', 'USA');

    print(welcome_msg);

    }

৩৩. আপনি InkWell ব্যবহার করে একটি ripple effect বানাতে পারেন যা দিয়ে টাচের কাজের জন্য ভিজুয়াল এক্সপেরিয়েন্স তৈরি করতে পারেন।

InkWell(

    splashColor: Colors.red,

    onTap: () {},

    child: Card(

        elevation: 5.0,

        child: Text(

              ' Click This ',

              style: Theme.of(context).textTheme.headline2,

            ),

        ),

    ),

৩৪. নিচের উদাহরণে আমরা BoxDecoration ও DecorationImage দুটি ব্যবহার করে একটি অ্যাপের ব্যাকগ্রাউন্ড ইমেজ সেট করছি।

@override

    Widget build(BuildContext context) {

      return Scaffold(

        appBar: AppBar(

          title: const Text('Flutter'),

        ),

        body: Container(

          width: double.infinity,

          height: double.infinity,

          decoration: BoxDecoration(

            image: DecorationImage(

              image: NetworkImage(image_Url),

            ),

          ),

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Text(

                'Title',

                style: const TextStyle(

                    color: Colors.white,

                    fontSize: 48,

                    fontWeight: FontWeight.bold),

              )

            ],

          ),

        ),

      );

    }

৩৫. আপনি ListWheelScrollView  উইজেট ব্যবহার করে একটি স্ক্রোলেবল হুইলে থ্রিডি এফেক্টসহ ListView বিল্ড করতে পারেন যেন মনে হয় বাচ্চারা একটা হুইলের মধ্যে ঘুরছে।

...

  

    List<Widget> items = [

        ListTile(

          leading: Icon(Icons.local_airport, size: 50),

          title: Text('Airport'),

          subtitle: Text('Description'),

        ),

        ListTile(

          leading: Icon(Icons.local_convenience_store, size: 50),

          title: Text('Convenience Store'),

          subtitle: Text('Description'),

        ),

        ListTile(

          leading: Icon(Icons.local_dining, size: 50),

          title: Text('Dining'),

          subtitle: Text('Description'),

        ),

        ListTile(

          leading: Icon(Icons.local_drink, size: 50),

          title: Text('Drink'),

          subtitle: Text('Description'),

        ),

        ListTile(

          leading: Icon(Icons.local_florist, size: 50),

          title: Text('Florist'),

          subtitle: Text('Description'),

        ),

        ListTile(

          leading: Icon(Icons.local_gas_station, size: 50),

          title: Text('Gas Station'),

          subtitle: Text('Description'),

        ),

        ListTile(

          leading: Icon(Icons.local_grocery_store, size: 50),

          title: Text('Grocery Store'),

          subtitle: Text('Description'),

        ),

      ];

  ...

      Center(

          child: ListWheelScrollView(

              itemExtent: 75,

              children: items,

            )

    )

৩৬. আপনি একটি টেক্সটের পেছনে ব্যাকগ্রাউন্ড কালার এবং শুরু ও শেষে একটি কার্ভ যুক্ত করতে পারবেন।

Center(

      child: Text(

        'This is a very important text ',

        style: TextStyle(

            fontWeight: FontWeight.w600,

            color: Colors.white,

            fontSize: 20,

            background: Paint()

              ..strokeWidth = 30.0

              ..color = Colors.red

              ..style = PaintingStyle.stroke

              ..strokeJoin = StrokeJoin.round),

      ),

    )

৩৭. ‘AboutListTile’ নামক রেডিমেড উইজেট দিয়ে একটি অ্যাবাউট বক্স দেখতে পারেন যেটা অ্যাপের অতিরিক্ত ইনফরমেশন যেমন এর ভার্শন, প্রাইভেসি পলিসি, অফিশিয়াল ওয়েবসাইট ইত্যাদি দেখাবে।

....

  

final List<Widget> aboutBoxChildren = <Widget>[

      SizedBox(

        height: 20,

      ),

      Text('App information'),

      Text('App Privacy Policy'),

      Text('App Terms of Service'),

      RichText(

        text: TextSpan(

          children: <TextSpan>[

            TextSpan(

                style: TextStyle(color: Theme.of(context).accentColor),

                text: 'Site URL'),

          ],

        ),

      )

    ];

.......

    drawer: Drawer(

      child: SingleChildScrollView(

        child: SafeArea(

          child: AboutListTile(

            icon: const Icon(Icons.info),

            applicationIcon: const FlutterLogo(),

            applicationName: 'Amazing About Example',

            applicationVersion: 'July 2021',

            applicationLegalese: '\u{a9} 2021 The Developer',

            aboutBoxChildren: aboutBoxChildren,

          ),

        ),

      ),

    ),

৩৮. FittedBox ব্যবহার করে চাইল্ড উইজেটকে ভেতরে স্কেল ও ফিট করুন। এটা চাইল্ড উইজেটদের তাদের সাইজ নির্দিষ্ট লিমিটের বাইরে বৃদ্ধিতে বাধা দেয়। এটা তাদেরকে তাদের অ্যাভেইলেবল সাইজে রি-স্কেল করে।

Center(

    child: Row(children: [

      Expanded(

        child: FittedBox(

            child: Text(

              "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",

            maxLines: 1,

            style: TextStyle(fontSize: 23),

            ),

        ),

      ),

    ]))

৩৯. SafeArea হচ্ছে একটি প্যাডিং উইজেট যা তার চাইল্ডকে যথেষ্ট পরিমাণ প্যাডিং দিয়ে ইনসার্ট করে যাতে করে এটা সিস্টেম স্ট্যাটাস বার, নচ (notches), হোলস (holes), রাউন্ডেড কর্নাস ইত্যাদি থেকে ব্লক পাওয়া থেকে রেয়াই পায়।

@override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SafeArea(

        top: true,

        bottom: true,

        left: true,

        right: true,

        minimum: EdgeInsets.all(16.0),

        maintainBottomViewPadding: true,

        child: Text('Check this important text'),

      ),

    );

  }

৪০. MediaQuery দিয়ে বর্তমান ডিভাইসের সাইজ, ওরিয়েন্টেশন এবং ইউজার প্রেফারেন্স সম্পর্কে তথ্য পাওয়া যায়।

...

  

  var orientation, size, height, width;

  // getting the orientation of the app

  orientation = MediaQuery.of(context).orientation;

  //size of the widow

  size = MediaQuery.of(context).size;

  height = size.height;

  width = size.width;

  ...

    

  // checking the orientation

  body: orientation == Orientation.portrait

      ? Container(

          color: Colors.green,

          height: height / 4,

          width: width / 4,

        )

      : Container(

          height: height / 3,

          width: width / 3,

          color: Colors.yellow,

        ),

৪১. Mixins এর সহায়তায় আপনি কোডের ব্লক পাগ করতে পারবেন কোনো সাবক্লাস বানানো ছাড়াই।

mixin Fluttering {

      void flutter() {

        print('fluttering');

      }

    }



    abstract class Bird with Fluttering {

      void flap() {

        print('flap flap');

      }

    }

    class Hawk extends Bird {

      void doHawkThing() {

        flap();

        flutter();

        print('Hawk is Flying');

      }

    }


    main() {

      var hawk = new Hawk();

      hawk.doHawkThing();

    }

৪২. একটি ফাংশনকে আরেকটি ফাংশনে প্যারামিটার হিসেবে পাস করা যায়।

 void main() {

    const list = ['London', 'Dublin', 'Belfast'];

   list.forEach(

      (item) => print('City Of $item'));

  }

৪৩. Getters ও setters হচ্ছে একটি অবজেক্টের প্রপার্টিতে রিড ও রাইট অ্যাক্সেস দেয়ার বিশেষ মেথড।

class Rectangle {

    double left, top, width, height;

    Rectangle(this.left, this.top, this.width, this.height);

    // Define two calculated properties: right and bottom.

    double get right => left + width;

    set right(double value) => left = value - width;

    double get bottom => top + height;

    set bottom(double value) => top = value - height;

  }

  void main() {

    var rect = Rectangle(3, 4, 20, 15);

    print(rect.left);

    rect.right = 12;

    print(rect.left);

  }

৪৪. String concatenate বা append করার চারটি ভিন্ন উপায় রয়েছে।

 void main() {

  //1- Using ‘+’ operator.

    String str1 = "Dart";

    String str2 = "Is";

    String str3 = "Fun";

    print(str1 + str2 + str3);

  //2- String interpolation.

    print('$str1 $str2 $str3');

  //3- Directly writing string literals.

    print('Dart' 'Is' 'Fun');

  //4- Strings.join() method.

    // Creating List of strings

    List<String> str = ["Dart", "Is", "Fun"];

    String _thestr = str.join();

    print(_thestr);

    _thestr = str.join(" ");

    print(_thestr);

  }

৪৫. validator উইজেট ব্যবহার করে আপনি আপনার সাবমিট ফাংশনে Form ইনপুট ভ্যালিডেট করতে পারবেন এবং প্রত্যেক TextFormField এ  ভ্যালিডেশন কন্ডিশন অ্যাপ্লাই করতে পারবেন।

...

      void _submit() {

          final isValid = _formKey.currentState.validate();

          if (!isValid) {

              return;

          }

          _formKey.currentState.save();

      }

...

  

          Form(

          key: _formKey,

          child: Column(

            children: [

              Text(

                "Form-Validation",

                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),

              ),

              //styling

              SizedBox(

                height: MediaQuery.of(context).size.width * 0.1,

              ),

              TextFormField(

                decoration: InputDecoration(labelText: 'E-Mail'),

                keyboardType: TextInputType.emailAddress,

                onFieldSubmitted: (value) {

                  //Validator

                },

                validator: (value) {

                  if (value.isEmpty ||

                      !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")

                          .hasMatch(value)) {

                    return 'Enter a valid email!';

                  }

                  return null;

                },

              ),

              //box styling

              SizedBox(

                height: MediaQuery.of(context).size.width * 0.1,

              ),

              //text input

              TextFormField(

                decoration: InputDecoration(labelText: 'Password'),

                keyboardType: TextInputType.emailAddress,

                onFieldSubmitted: (value) {},

                obscureText: true,

                validator: (value) {

                  if (value.isEmpty) {

                    return 'Enter a valid password!';

                  }

                  return null;

                },

              ),

              SizedBox(

                height: MediaQuery.of(context).size.width * 0.1,

              ),

              RaisedButton(

                padding: EdgeInsets.symmetric(

                  vertical: 10.0,

                  horizontal: 15.0,

                ),

                child: Text(

                  "Submit",

                  style: TextStyle(

                    fontSize: 24.0,

                  ),

                ),

                onPressed: () => _submit(),

              )

            ],

          ),

        ),

...

৪৬. ListView দিয়ে scrollDirection প্যারামিটারে Axis.horizontal সেট করে হরাইজন্টাল লিস্ট বানান।

...

      ListView(

        scrollDirection: Axis.horizontal,

        children: [

          Container(

            height: 480.0,

            width: 240.0,

            decoration: BoxDecoration(

              image: DecorationImage(

                image: AssetImage('images/image1.png'),

                fit: BoxFit.fill,

              ),

              shape: BoxShape.rectangle,

            ),

          ),

          Container(

            height: 480.0,

            width: 240.0,

            decoration: BoxDecoration(

              image: DecorationImage(

                image: AssetImage('images/image2.webp'),

                fit: BoxFit.fill,

              ),

              shape: BoxShape.rectangle,

            ),

          ),

          Container(

            height: 480.0,

            width: 240.0,

            decoration: BoxDecoration(

              image: DecorationImage(

                image: AssetImage('images/image3.jpg'),

                fit: BoxFit.fill,

              ),

              shape: BoxShape.rectangle,

            ),

          ),

          Container(

            height: 480.0,

            width: 240.0,

            decoration: BoxDecoration(

              image: DecorationImage(

                image: AssetImage('images/image4.jpg'),

                fit: BoxFit.fill,

              ),

              shape: BoxShape.rectangle,

            ),

          ),

        ],

      ),

...

৪৭. floatingActionButtonLocation প্যারামিটারকে নিচের মত করে FloatingActionButton কে মাঝামাঝি আনুন।

...

    floatingActionButton: FloatingActionButton(

      onPressed: () {},

      child: Icon(Icons.settings_voice),

    ),

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

...

৪৮. আপনি SnackBar যখন এটা প্রেস করা হবে তখন একটা অ্যাকশন লেবেল দিতে পারেন নিচের মত করে।

...

  final snackBar = SnackBar(

          content: const Text('Amazing SnackBar!'),

          action: SnackBarAction(

            label: 'Undo',

            onPressed: () {

              // Do something.

            },

          ),

        );

...

৪৯. ইউজার যখন এলার্ট বক্সের বাইরে ট্যাপ করে তখন barrierDismissible প্রপার্টি দিয়ে AlertDialog ডিসমিস হওয়া থেকে প্রতিহত করুন।

...

      showDialog<String>(

        context: context,

        barrierDismissible: false,

        builder: (BuildContext context) => AlertDialog(

          title: const Text('This is a title'),

          content: const Text('This is a description'),

          actions: <Widget>[

            TextButton(

              onPressed: () => Navigator.pop(context, 'Cancel'),

              child: const Text('Cancel'),

            ),

            TextButton(

              onPressed: () => Navigator.pop(context, 'OK'),

              child: const Text('OK'),

            ),

          ],

        ),

      ),

...

৫০. আপনি ElevatedButton দিয়ে একটি সার্কুলার বাটন বানাতে পারেন। নিচের মত করে।

    ElevatedButton(

    style: ElevatedButton.styleFrom(

        shape: CircleBorder(), padding: EdgeInsets.all(30)),

    child: Icon(

      Icons.add,

      size: 50,

    ),

    onPressed: () {},

   )

৫১. ShaderMask উইজেট দিয়ে আপনি একটি গ্রেডিয়েন্ট লুক অ্যাপ্লাই করতে পারেন এবং চাইল্ডে ফিল করাতে পারেন।

      body: Center(

        child: ShaderMask(

          blendMode: BlendMode.srcIn,

          shaderCallback: (Rect bounds) {

            return LinearGradient(

              colors: [Colors.red, Colors.green],

              tileMode: TileMode.clamp,

            ).createShader(bounds);

          },

          child:

              const Text('This is a colorful Text', style: TextStyle(fontSize: 36)),

        ),

      ),

৫২. AnimatedSize একটি উইজেট যা অটোম্যাটিকভাবে একটি প্রদত্ত সীমার মধ্যে তার সাইজ ট্রানজিশন করে যখনই প্রদত্ত চাইল্ডের সাইজ পরিবর্তিত হয়।

class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin {

  double _size = 50.0;

  bool _large = false;

  void _updateSize() {

    setState(() {

      _size = _large ? 250.0 : 100.0;

      _large = !_large;

    });

  }

  

  @override

  Widget build(BuildContext context) {

    return GestureDetector(

      onTap: () => _updateSize(),

      child: Container(

        color: Colors.amberAccent,

        child: AnimatedSize(

          vsync: this,

          curve: Curves.easeInCirc,

          duration: const Duration(seconds: 2),

          child: FlutterLogo(size: _size),

        ),

      ),

    );

  }

}

৫৩. flutter_staggered_grid_view ব্যবহার করে আপনি বিভিন্ন সাইজের একাধিক কলাম এবং রো’র একটি গ্রিডভিউ তৈরি করতে পারেন।

  new StaggeredGridView.countBuilder(

    crossAxisCount: 4,

    itemCount: 8,

    itemBuilder: (BuildContext context, int index) => new Container(

        color: Colors.green,

        child: new Center(

          child: new CircleAvatar(

            backgroundColor: Colors.white,

            child: new Text('$index'),

          ),

        )),

    staggeredTileBuilder: (int index) =>

        new StaggeredTile.count(2, index.isEven ? 2 : 1),

    mainAxisSpacing: 4.0,

    crossAxisSpacing: 4.0,

  )

৫৪. আপনি ColorFiltered উইজেট দিয়ে তার চাইল্ড উইজেটে একটি কালার ফিল্টার অ্যাপ্লাই করতে পারেন।

      Column(

        children: [

          // The original image

          Image.network(_imageUrl),

          // The black-and-white image

          ColorFiltered(

            colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),

            child: Image.network(_imageUrl),

          ),

        ],

      ),

৫৫. flutter_speed_dial প্লাগইন দিয়ে একই স্ক্রিনে একাধিক ফ্লোটিং বাটন বানান।

...

      floatingActionButton: SpeedDial(

          icon: Icons.share,

          backgroundColor: Colors.amber,

          children: [

            SpeedDialChild(

              child: Icon(Icons.face),

              label: 'Social Network',

              backgroundColor: Colors.amberAccent,

              onTap: () {/* Do someting */},

            ),

            SpeedDialChild(

              child: Icon(Icons.email),

              label: 'Email',

              backgroundColor: Colors.amberAccent,

              onTap: () {/* Do something */},

            ),

            SpeedDialChild(

              child: Icon(Icons.chat),

              label: 'Message',

              backgroundColor: Colors.amberAccent,

              onTap: () {/* Do something */},

            ),

          ]),

...

৫৬. একটি টেক্সট উইজেটের জন্য আপনি একাধিক শ্যাডো বানাতে পারবেন। নিচের উদাহরণ দেখুন।

        Text('Important Text',

          style: TextStyle(

            color: Colors.black,

            fontSize: 50,

            fontWeight: FontWeight.bold,

            shadows: [

              Shadow(

                  color: Colors.red[500]!,

                  offset: Offset(-50, -50),

                  blurRadius: 5),

              Shadow(

                  color: Colors.green[200]!,

                  offset: Offset(50, 50),

                  blurRadius: 5),

            ],

          ),

        ),

৫৭. LayoutBuilder দিয়ে একটি উইজেট ট্রি বানানো যায় যেটা তার প্যারেন্ট উইজেটের উপর নির্ভর করবে।

      LayoutBuilder(

      builder: (context, constraints) {

        if (constraints.maxWidth >= 750) {

          return Container(

            color: Colors.green,

            height: 100,

            width: 100,

          );

        } else {

          return Container(

            color: Colors.yellow,

            height: 100,

            width: 100,

          );

        }

      },

    );

৫৮. wrap এমন একটি উইজেট যা তার চিল্ড্রেনকে হরাইজন্টাল অথবা ভার্টিকাল রানে ডিসপ্লে করতে পারে। এটা প্রত্যেক চাইল্ডকে মূল অ্যাক্সিসে পূর্ববর্তী চাইল্ডের পাশে রাখতে চেষ্টা করবে। যদি সেখানে যথেষ্ট জায়গা না থাকে, তাহলে এটা আগের চিল্ড্রেনের পাশে ক্রস অ্যাক্সিসে নতুন একটা রান বানাবে।

Wrap(

      children: List.generate(

        10,

        (index) => Container(

          margin: const EdgeInsets.all(10),

          color: Colors.green,

          height: 100,

          width: 100,

        ),

      ),

    );

৫৯. AnimatedIcon হচ্ছে একটা ফ্লাটার উইজেট যা একটা আইকনের সুইচিং আরেকটার সাথে অ্যানিমেট করে।

      AnimatedIcon(

          icon: AnimatedIcons.pause_play,

          size: 52,

          progress: myAnimation

      ),

৬০. AnimatedContainer উইজেট হচ্ছে একটি অ্যানিমেশনসহ কন্টেইনার উইজেট। এর প্রপার্টির ভ্যালু পরিবর্তন করার মাধ্যমে এটাকে অ্যানিমেট করা যাবে।

AnimatedContainer(

        width: _width,

        height: _height,

        decoration: BoxDecoration(

          color: _color,

          borderRadius: _borderRadius,

        ),

        duration: Duration(seconds: 1),

        curve: Curves.fastOutSlowIn,

      ),

৬১. SliverAppBar দিয়ে একটা ফ্লোটিং অ্যাপ বার আনা যায়।

        SliverAppBar(

          pinned: _pinned,

          snap: _snap,

          floating: _floating,

          expandedHeight: 160.0,

          flexibleSpace: const FlexibleSpaceBar(

            title: Text('SliverAppBar'),

            background: FlutterLogo(),

          ),

        ),

৬২. AnimatedOpacity উইজেট দিয়ে একটা সীমার মধ্যে অটোম্যাটিকভাবে চাইল্ডের অপাসিটি ট্রানজিশন করা যায় যখনই অপাসিটি চেঞ্জ হয়।

        AnimatedOpacity(

          opacity: _opacity,

          duration: const Duration(seconds: 1),

          curve: Curves.bounceInOut,

          // The green box must be a child of the AnimatedOpacity widget.

          child: Container(

            width: 200.0,

            height: 200.0,

            color: Colors.green,

          ),

        ),

৬৩. SlideTransition উইজেট দিয়ে এর নরমাল পজিশনের সাপেক্ষে তার পজিশন অ্যানিমেট করা যায়।

    SlideTransition(

      position: _offsetAnimation,

      child: const Padding(

        padding: EdgeInsets.all(8.0),

        child: FlutterLogo(size: 150.0),

      ),

    )

৬৪. FadeTransition উইজেট অপাসিটি অ্যানিমেশনের মাধ্যমে একটা উইজেটকে ফেড ইন ও আউট করে।

      FadeTransition(

        opacity: _animation,

        child: const Padding(padding: EdgeInsets.all(8), 

                             child: FlutterLogo(),),

      ),

৬৫. AnimatedCrossFade দিয়ে দুইটি প্রদত্ত চিল্ড্রেনের মাঝে ক্রস-ফেড করা যায় এবং তাদেরকে তাদের সাইজের মধ্যে অ্যানিমেট করা যায়।

        AnimatedCrossFade(

              crossFadeState: _isFirst

                  ? CrossFadeState.showFirst

                  : CrossFadeState.showSecond,

              duration: const Duration(seconds: 1),

              firstCurve: Curves.easeInCubic,

              secondCurve: Curves.easeInCirc,

              firstChild: const FlutterLogo(

                  style: FlutterLogoStyle.horizontal, size: 100.0),

              secondChild: const FlutterLogo(

                  style: FlutterLogoStyle.stacked, size: 100.0),

        )

৬৬. CupertinoContextMenu উইজেট হচ্ছে একটা ফুল-স্ক্রিন মোডাল রাউট যা চাইল্ডকে লং-প্রেস করলে ওপেন হয়।

        CupertinoContextMenu(

            child: Container(

              color: Colors.red,

            ),

            actions: <Widget>[

              CupertinoContextMenuAction(

                child: const Text('Action one'),

                onPressed: () {

                  Navigator.pop(context);

                },

              ),

              CupertinoContextMenuAction(

                child: const Text('Action two'),

                onPressed: () {

                  Navigator.pop(context);

                },

              ),

            ],

        ),

৬৭. BackdropFilter উইজেট পূর্বে বিদ্যমান পেইন্টেড কন্টেন্টের উপর একটি ফিল্টার অ্যাপ্লাই করে।

          BackdropFilter(

              filter: ImageFilter.blur(

                sigmaX: 10.0,

                sigmaY: 10.0,

              ),

              child: Container(

                color: Colors.black.withOpacity(0.2),

              ),

          ),

৬৮. RotatedBox তার চাইল্ডকে একটি কোয়ার্টার টার্নের ইন্টিগ্রাল নাম্বারে রোটেট করে।

      RotatedBox(

        quarterTurns: 2,

        child: Text(

          'This is a Roated Text ',

          style: TextStyle(

            fontSize: 55,

            fontWeight: FontWeight.bold,

            letterSpacing: 0,

          ),

        ),

      )

৬৯. Spacer উইজেট দিয়ে উইজেটদের মাঝে স্পেস বানানো যায়।

    Container(

          color: Colors.red,

          height: 50,

          width: 50,

        ),

    Spacer(),

    Container(

          color: Colors.green,

          height: 50,

          width: 50,

        ),

    Spacer(),

৭০. FractionallySizedBox এমন এক উইজেট যা তার চাইল্ডকে মোট বিদ্যমান স্পেসের একাংশতে সাইজ করে।

...

      FractionallySizedBox(

        widthFactor: 0.5,

        heightFactor: 0.25,

        child: RaisedButton(

          child: Text('Click Me'),

          color: Colors.red,

          textColor: Colors.white,

          onPressed: () {},

        ),

      ),

...

৭১. AnimatedSwitcher উইজেট দিয়ে দুইটি উইজেট সুইচ করার সময় অ্যানিমেশন বানান।

...

          AnimatedSwitcher(

            duration: const Duration(milliseconds: 500),

            transitionBuilder: (Widget child, Animation<double> animation) {

              return ScaleTransition(child: child, scale: animation);

            },

            child: Text(

              '$_count',

              key: ValueKey<int>(_count),

              style: Theme.of(context).textTheme.headline4,

            ),

          ),

...

৭২. CupertinoAlertDialog দিয়ে আইওএস-স্টাইলের একটি উইজেট বানান, যা ইউজারকে এমন পরিস্থিতি নিয়ে বার্তা দেয় যার ব্যাপারে ব্যবস্থা নেয়া প্রয়োজন।

...

        CupertinoAlertDialog(

              title: Text("This is the title"),

              content: Text("This is the content"),

              actions: [

                // Close the dialog

                // You can use the CupertinoDialogAction widget instead

                CupertinoButton(

                    child: Text('Cancel'),

                    onPressed: () {

                      Navigator.of(ctx).pop();

                    }),

                CupertinoButton(

                  child: Text('I agree'),

                  onPressed: () {

                    // Do something

                    print('I agreed');

                    // Then close the dialog

                    Navigator.of(ctx).pop();

                  },

                )

              ],

            )

...

৭৩. CupertinoButton উইজেট দিয়ে একটি আই-ওএস স্টাইলের বাটন বানাতে পারেন যা টাচ করার সাথে সাথে ফেড আউট এবং ফেড ইন হয় এমন একটা টেক্সট বা আইকন নেয়।

...

        Container(

          child: Center(

            child: CupertinoButton(

              onPressed: () {

                // Todo

              },

              child: Text("CupertinoButton Widget"),

            ),

          ),

        ),

        Container(

          child: Center(

            child: CupertinoButton.filled(

              onPressed: () {},

              child: Text("CupertinoButton Widget"),

            ),

          ),

        ),

...

৭৪. CupertinoActionSheet হচ্ছে একটি আইওএস-থিমএড উইজেট যার অ্যাকশন শিট ডিজাইন স্পেসিফিকেশন ( action sheets design specifications) আছে।

...

           CupertinoActionSheet(

              title: Text(

                "Flutter dev",

                style: TextStyle(fontSize: 30),

              ),

              message: Text(

                "Select any action ",

                style: TextStyle(fontSize: 15.0),

              ),

              actions: <Widget>[

                CupertinoActionSheetAction(

                  child: Text("Action 1"),

                  isDefaultAction: true,

                  onPressed: () {

                    print("Action 1 is been clicked");

                  },

                ),

                CupertinoActionSheetAction(

                  child: Text("Action 2"),

                  isDestructiveAction: true,

                  onPressed: () {

                    print("Action 2 is been clicked");

                  },

                )

              ],

              cancelButton: CupertinoActionSheetAction(

                child: Text("Cancel"),

                onPressed: () {

                  Navigator.pop(context);

                },

              ),

            );

...

৭৫. GestureDetector ব্যবহার করে ট্যাপ, ডাবল ট্যাপ, প্রেস, লং প্রেস, প্যান ড্র্যাগ, জুম ইত্যাদি জেসচার ডিটেক্ট করুন।

...

    Container(

      color: _color,

      height: 200.0,

      width: 200.0,

      child: GestureDetector(

        onTap: () {

          setState(() {

            _color = Colors.yellow;

          });

        },

      ),

    )

...

৭৬. AnimatedDefaultTextStyle একটি প্রদত্ত ডিউরেশনের মধ্যে ডিফল্ট টেক্সট স্টাইল ট্রানজিশন করে যখনই স্টাইল চেঞ্জ হয়।

...

    AnimatedDefaultTextStyle(

      duration: Duration(milliseconds: 300),

      child: Text("Flutter"),

      style: newStyle,

    )

...

৭৭. Future.delayed() ব্যবহার করে নির্দিষ্ট সময়ের জন্য প্রোগ্রাম ফ্লো পজ (pause) করুন। 

...

  

  await Future.delayed(const Duration(seconds: 1));

...

৭৮. DecoratedBoxTransition ব্যবহার করে  DecoratedBox এর বিভিন্ন প্রপার্টিকে অ্যানিমেট করা যায়।

...

  

       DecoratedBoxTransition(

        position: DecorationPosition.background,

        decoration: decorationTween.animate(_controller),

        child: Container(

          child: Container(

            width: 200,

            height: 200,

            padding: EdgeInsets.all(20),

            child: FlutterLogo(),

          ),

        ),

      ),

...

৭৯. Divider উইজেট ব্যবহার করুন আর একটি ১ পিক্সেল পুরু আনুভূমিক (horizontal) লাইন তৈরি করুন দুইপাশে প্যাডিং (padding) সহ।

...

  

    ListTile(

      title: Text('Item1')

    ),

    Divider(),

    ListTile(

      title: Text('Item2'),

    ),

...

৮০. DropdownButton উইজেট দিয়ে একটি আইটেম লিস্টে সার্চ করার জন্য একটি বাটন তৈরি করুন।

...

  

        DropdownButton<String>(

          value: dropdownValue,

          onChanged: (String? newValue) {

            setState(() {

              dropdownValue = newValue!;

            });

          },

          items: <String>['One', 'Two', 'Free', 'Four']

              .map<DropdownMenuItem<String>>((String value) {

            return DropdownMenuItem<String>(

              value: value,

              child: Text(value),

            );

          }).toList(),

        ),

...

৮১. Flow এমন একটি উইজেট যা এর চাইল্ড উইজেটগুলো অ্যারেঞ্জ করে FlowDelegate এর ভিত্তিতে।

...

  

    Flow(

      delegate: FlowMenuDelegate(menuAnimation: menuAnimation),

      children:

          menuItems.map<Widget>((IconData icon) => flowMenuItem(icon)).toList(),

    )

...

৮২. Flexible উইজেট দিয়ে Text Overflow এরোর ফিক্স করা যায়।

...

  

      Flexible(

        child: Text(

          'Flutter Text Overflow while adding long text. how to wrap text in flutter ',

          style: TextStyle(fontSize: 20),

        ),

      )

...

৮৩. CheckboxListTile হচ্ছে একটি উইজেট যা একটা চেকবক্স এবং একটি লিস্ট টাইল কম্বাইন করে। এটা দিয়ে আপনি টাইটেল, সাবটাইটেল এবং আইকনসহ একটা চেকবক্স বানাতে পারবেন।

...

  

  CheckboxListTile(

    value: _isChecked,

    onChanged: (bool value) {

      setState(() {

        _isChecked = value;

      });

    },

  )

...

৮৪.  LinearProgressIndicator উইজেট হচ্ছে একটা ম্যাটেরিয়াল ডিজাইন লিনেয়ার প্রোগ্রেস ইন্ডিকেটর (material design linear progress indicator)।

...

  

    LinearProgressIndicator(

      value: controller.value,

      semanticsLabel: 'Linear progress indicator',

    ),

...

৮৫. PageView একটি স্ক্রোলেবল লিস্ট যেটা পেজ বাই পেজ কাজ করে।

...

  

    PageView(

      children: <Widget>[

        Container(

          color: Colors.pink,

          child: Center(

            child: Text('Page 1'),

          ),

        ),

        Container(

          color: Colors.cyan,

          child: Center(

            child: Text('Page 2'),

          ),

        ),

        Container(

          color: Colors.deepPurple,

          child: Center(

            child: Text('Page 3'),

          ),

        ),

      ],

    )

...

৮৬. PhysicalModel উইজেটের সাহায্যে আপনি কাস্টম শ্যাডো ইফেক্ট অ্যাড করতে পারবেন এবং এর রঙ ও শেপ কাস্টমাইজ করতে পারবেন।

...

  

    PhysicalModel(

      elevation: 6.0,

      shape: BoxShape.rectangle,

      shadowColor: Colors.black,

      color: Colors.white,

      child: Container(

        height: 120.0,

        width: 120.0,

        color: Colors.blue[50],

        child: FlutterLogo(

          size: 60,

        ),

      ),

    )

...

৮৭. RadioListTile উইজেট হচ্ছে লেবেলসহ একটি রেডিও বাটন।

...

  

        RadioListTile<SingingCharacter>(

          title: const Text('Thomas Jefferson'),

          value: SingingCharacter.jefferson,

          groupValue: _character,

          onChanged: (SingingCharacter value) { setState(() { _character = value; }); },

      ),

  

...

৮৮. RangeSlider উইজেটটি অনেকগুলো ভ্যালুর একটি রেঞ্জ থেকে একটি রেঞ্জ সিলেক্ট করতে ব্যবহৃত হয়।

...

  

      RangeSlider(

      values: _currentRangeValues,

      min: 0,

      max: 100,

      divisions: 5,

      labels: RangeLabels(

        _currentRangeValues.start.round().toString(),

        _currentRangeValues.end.round().toString(),

      ),

      onChanged: (RangeValues values) {

        setState(() {

          _currentRangeValues = values;

        });

      },

    );

  

...

৮৯. RefreshIndicator একটি উইজেট যা Material এর swipe-to-refresh সাপোর্ট করে।

...

  

        RefreshIndicator(

          onRefresh: () async {

            return await Future.delayed(Duration(seconds: 3));

          },

          child: ListView(

            padding: const EdgeInsets.all(8.0),

            children: <Widget>[

              Container(

                height: 50,

                color: Colors.amber[600],

                child: const Center(child: Text('Entry A')),

              ),

              Container(

                height: 50,

                color: Colors.amber[500],

                child: const Center(child: Text('Entry B')),

              ),

              Container(

                height: 50,

                color: Colors.amber[100],

                child: const Center(child: Text('Entry C')),

              ),

            ],

          ),

        ),

  

...

৯০. Switch উইজেট ব্যবহৃত হয় একটি সিঙ্গেল সেটিং টগল অন/অফ করার জন্য।

...

  

          Switch(

            value: isSwitched,

            onChanged: (value) {

              setState(() {

                isSwitched = value;

                print(isSwitched);

              });

            },

            activeTrackColor: Colors.lightGreenAccent,

            activeColor: Colors.green,

          ),

  

...

৯১. Tooltip উইজেট একটি বাটনের ফাংশন অথবা other user interface action বিশ্লেষণে সাহায্য করে।

...

  

    Tooltip(

      message: 'I am a Tooltip',

      child: Text('Hover over the text to show a tooltip.'),

    );

  

...

৯২. SelectableText উইজেট দিয়ে ইউজার ইউআইয়ের কন্টেন্ট সিলেক্ট/কপি করতে পারে।

...

  

  const SelectableText(

    'Hello! How are you?',

    textAlign: TextAlign.center,

    style: TextStyle(fontWeight: FontWeight.bold),

  )

  

...

৯৩. Transform হচ্ছে একটি উইজেট যা নিজের চাইল্ডকে পেইন্ট করার আগে ট্রান্সফরমেশন অ্যাপ্লাই করে।

...

  

  Container(

  color: Colors.black,

  child: Transform(

    alignment: Alignment.topRight,

    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),

    child: Container(

      padding: const EdgeInsets.all(8.0),

      color: const Color(0xFFE8581C),

      child: const Text('Apartment for rent!'),

    ),

  ),

)

...

৯৪. VerticalDivider উইজেট হল একটি ওয়ান ডিভাইস পিক্সেল থিক ভার্টিকাল লাইন (one device pixel thick vertical line), দুইপাশে প্যাডিংসহ। 

...

  

Row(

  mainAxisSize: MainAxisSize.min,

  children: <Widget>[

    Container(

      child: Text('Item1')

    ),

    VerticalDivider(),

    Container(

      child: Text('Item2'),

    ),

    VerticalDivider(),

    Container(

      child: Text('Item3'),

    ),

  ],

)

...

৯৫. TimePicker উইজেট একটি ম্যাটেরিয়াল ডিজাইন থিম পিকার সম্বলিত ডায়ালগ শো করে।

...

  

Future<TimeOfDay> selectedTime = showTimePicker(

  initialTime: TimeOfDay.now(),

  context: context,

);

...

৯৬. Stepper উইজেট দিয়ে একটি স্টেপের সিকুয়েন্সের মধ্যে প্রগ্রেস ডিসপ্লে করে।

...

  

Stepper(

          steps: [

            Step(

              title: new Text('Login Info'),

              content: Column(

                children: <Widget>[

                  TextFormField(

                    decoration: InputDecoration(labelText: 'Email Address'),

                  ),

                  TextFormField(

                    decoration: InputDecoration(labelText: 'Password'),

                  ),

                ],

              ),

              isActive: true,

              state: StepState.editing

            ),

          ],

        )

...

৯৭. ActionChip উইজেট দিয়ে চিপস নামক কমপ্যাক্ট এলেমেন্ট বানানো যায়, যা ইউজারের প্রেস করার সাথে সাথে একটা অ্যাকশন ট্রিগার করে।

...

  

  ActionChip(

    label: Text('Delete'),

    onPressed: () {

      print('Processing to delete item');

    }

  )

...

৯৮. ExpansionPanel হল একটি হেডার ও একটি বডিসহ প্যানেল এবং এটাকে এক্সপ্যান্ড বা কোল্যাপ্স করা যায়। প্যানেলের বডি শুধু তখনই দৃশ্যমান হয় যখন সেটাকে এক্সপ্যান্ড করা হয়।

...

  

        ExpansionPanel(

          headerBuilder: (context, isExpanded) {

            return ListTile(

              title: Text(

                'Click To Expand',

                style: TextStyle(color: Colors.black),

              ),

            );

          },

          body: ListTile(

            title: Text('Description text',

                style: TextStyle(color: Colors.black)),

          ),

          isExpanded: _expanded,

          canTapOnHeader: true,

        ),

...

৯৯. LongPressDraggable উইজেট দিয়ে একটি উইজেট বানানো যায় যেটা লংপ্রেসের মাধ্যমে ড্র্যাগ করা যায়।

...

  

          LongPressDraggable(

            feedback: FlutterLogo(

              textColor: Colors.orange,

              size: 100,

              style: FlutterLogoStyle.stacked,

            ),

            child: FlutterLogo(

              textColor: Colors.green,

              size: 100,

              style: FlutterLogoStyle.stacked,

            ),

            onDragEnd: (details) {

              setState(() {

                final adjustment = MediaQuery.of(context).size.height -

                    constraints.maxHeight;

                _offset = Offset(

                    details.offset.dx, details.offset.dy - adjustment);

              });

            },

          ),

...

১০০. Baseline হল একটি উইজেট যা তার চাইল্ডকে পজিশন করে চাইল্ডের বেজলাইন অনুযায়ী।

...

    Center(

      child: Container(

        color: Colors.blue,

        height: 120.0,

        width: 120.0,

        child: Baseline(

          child: Container(

            color: Colors.red,

            height: 60.0,

            width: 60.0,

          ),

          baseline: 20.0,

          baselineType: TextBaseline.alphabetic,

        ),

      ),

    )

...

১০১. Banner উইজেট দিয়ে আরেকটি উইজেটের কোণার উপরে একটি ডায়াগনাল ম্যাসেজ ডিসপ্লে করানো যায়।

...

  

    Center(

      child: Container(

        margin: const EdgeInsets.all(10.0),

        color: Colors.yellow,

        height: 100,

        child: ClipRect(

          child: Banner(

            message: "hello",

            location: BannerLocation.topEnd,

            color: Colors.red,

            child: Container(

              color: Colors.yellow,

              height: 100,

              child: Center(

                child: Text("Hello, banner!"),

              ),

            ),

          ),

        ),

      ),

    )

...

১০২. BottomNavigationBar যেটা একটি অ্যাপের নিচে দেখা যায় এবং যেটি দিয়ে কম সংখ্যক ভিউস সিলেক্ট করা যায়, সাধারণত তিন থেকে পাঁচের মধ্যে।

...

  

      bottomNavigationBar: BottomNavigationBar(

        items: const <BottomNavigationBarItem>[

          BottomNavigationBarItem(

            icon: Icon(Icons.home),

            label: 'Home',

          ),

          BottomNavigationBarItem(

            icon: Icon(Icons.business),

            label: 'Business',

          ),

          BottomNavigationBarItem(

            icon: Icon(Icons.school),

            label: 'School',

          ),

        ],

        currentIndex: _selectedIndex,

        selectedItemColor: Colors.amber[800],

        onTap: _onItemTapped,

      ),

...

১০৩. IntrinsicWidth হচ্ছে এমন একটি উইজেট যা তার চাইল্ডকে সাইজ করে চাইল্ডের সর্বোচ্চ অন্তর্নিহিত (intrinsic) প্রস্থে।

...

  

 IntrinsicWidth(

    child: Column(

      crossAxisAlignment: CrossAxisAlignment.stretch,

      children: [

        Container(

          width: 200,

          height: 100,

          color: Colors.teal,

        ),

        Expanded(

          child: Container(

            width: 100,

            height: 100,

            color: Colors.red,

          ),

        ),

      ],

    ),

  )

...

১০৪. IntrinsicHeight একটি উইজেট যা তার চাইল্ডকে চাইল্ডের অন্তর্নিহিত (intrinsic) উচ্চতায় সাইজ করে।

...

  

  IntrinsicHeight(

    child: Row(

      crossAxisAlignment: CrossAxisAlignment.stretch,

      children: [

        Container(

          width: 150,

          height: 100,

          color: Colors.teal,

        ),

        Container(

          width: 150,

          height: 200,

          color: Colors.red,

        )

      ],

    ),

  )

...

Share this article

RELATED ARTICLES

What Are The Benefits Of Flutter App Development?

ফ্লাটার অ্যাপ ডেভেলপমেন্টের সুবিধা || What Are The Benefits Of Flutter App Development? || About Flutter App Benefits টেকনোলজির ব্যবহার মানুষের জীবনকে আগের তুলনায় অনেক সহজ করেছে। ধরুন, আপনি যদি কোডিং লেখা ছাড়াই, কোনো অ্যাপের মাধ্যমে , একটা লাইন ইনপুট দিলেন, আর সাথে সাথে এর নির্ভুল একটা কোড পেয়ে যান, তাহলে কি আপনার আর কোডিং শেখার  মতো কাজটি আর করতে হবে? আপনি নিশ্চয়ই আর কোডিং শিখতে যাবেন না। কেননা, মানুষ যে উপায়ে সহজে ও নির্ভুল ভাবে কোন একটি কাজ করতে পারে, সে সেটিই সবসময় ইউজ করে। তাই বর্তমানে ক

11 July 2024

1 min read

ফ্লাটার কি ফ্রন্টেড নাকি ব্যাকেন্ড? ।। Is Flutter Frontend Or Backend (Uses of Flutter)?

অ্যাপ ডেভেলমেন্টের এই যুগে কতশত ফ্রেমওয়ার্কের আলাপ আসে আর যায়, তবে কিছু কিছু ফ্রেমওয়ার্ক যেন অ্যাপ ডেভেলমেন্টের জগতকেই পালটে দেয়। ২০১৫ সালে গুগলের আনা একটি ফ্রেমওয়ার্ক ফ্লাটার ঠিক তেমনি একটি ফ্রেমওয়ার্ক। মোবাইল অ্যাপ ডেভেলমেন্টকে টার্গেট করে ডেভেলপ করা এই ফ্রেমওয়ার্কটির পটেনশিয়াল দিনদিন বেড়েই চলছে।  আর এই অ্যাপ ডেভেলপমেন্টের ক্ষেত্রে, যে দুইটি সাইড সুপ্রিমেসি নিয়ে আছে সেগুলো হল: ফ্রন্টএন্ড এবং ব্যাকএন্ড।  ফ্রন্টএন্ড হল চকচকে ঝকঝকে ইন্টারফেস যার সাথে ইউজাররা ইন্টারঅ্যাক্ট করে, আর ব্যাকএন্ড মূলত

08 July 2024

1 min read

ডাটা সায়েন্টিস্ট হওয়ার ৮ টি স্টেপ

আপনার কি মনে হচ্ছে না, ডেটা সাইনটিস্ট হওয়ার এখনি সময়? একবার চারপাশে খেয়াল করুন তো! তাহলে দেখতে পাবেন ডেটা সায়েন্স এখন সব জায়গায়। একের পর এক, ওয়ার্ল্ডওয়াইড কোম্পানিগুলো সবচেয়ে ডাইভার্স প্রবলেমগুলোর সলিউশনের জন্য ডেটা সায়েন্সের দিকে ঝুঁকছে।  এই পরিস্থিতি ডেটা সাইনটিস্টদের জব সেক্টর ও স্যালারি স্ট্রাকচার কিন্তু খুবই অ্যাডভান্টেজ পজিশনে আছে। তাই আর দেরি কেন?? ৮ টি স্টেপ ফলো করে, আপনিও হতে পারেন একজন ডাটা সায়েন্টিস্ট। 1. Learn data wrangling, data visualization, and reporting  আপনি যখন ডেটা সায

15 May 2024

দ্য ফিউচার অফ আর্টিফিশিয়াল ইন্টেলিজেন্স

আমি যদি সাম্প্রতিক সময়ের কথা বলি সেখানে কৃত্রিম বুদ্ধিমত্তা (আর্টিফিশিয়াল ইন্টেলিজেন্স) বা AI বেশ বিপ্লব ঘটিয়েছে। হেলথকেয়ার থেকে শুরু করে ট্রান্সপোর্ট, এডুকেশন থেকে শুরু করে এন্টারটেইনমেন্ট এর ক্ষেত্রে AI এর ব্যবহার ব্যাপক। আর তাই ধীরে ধীরে আমরা নির্ভর হয়ে পড়ছি AI এর উপর। কিন্তু এই প্রযুক্তির ভবিষ্যৎ কী? আর্টিফিশিয়াল ইন্টেলিজেন্স আমাদের জীবনকে আরও ভালো করে তুলতে ব্যবহার করা হবে নাকি আমাদের অস্তিত্বের জন্য হুমকি সৃষ্টি করবে? এই প্রশ্নের উত্তর দেওয়ার আগে আমি একটি সাম্প্রতিক ডাটা শেয়ার করি। 2023

13 May 2024

অনলাইন লাইভ স্কিল ডেভেলপমেন্ট প্ল্যাটফর্ম।

ডাউনলোড করুন ওস্তাদ অ্যাপ

কমিউনিটি -এর সাথে কানেক্টেড থাকতে