ফ্লাটার উইজেট - Flutter Widgets

 

এই অধ্যায়ে আমরা একটি উইজেটের ধারণা, এটি কীভাবে তৈরি করতে হয় এবং ফ্লাটার  ফ্রেমওয়ার্কে তাদের বিভিন্ন ধরনের উপলব্ধ শিখতে যাচ্ছি। আমরা আগে শিখেছি যে ফ্লটারের সবকিছুই একটি উইজেট।

আপনি যখনই ফ্লটারে কিছু তৈরি করার জন্য কোড করতে যাচ্ছেন, তখন এটি একটি উইজেটের ভিতরে থাকবে। কেন্দ্রীয় উদ্দেশ্য উইজেট থেকে অ্যাপ তৈরি করা। এটি বর্ণনা করে যে আপনার অ্যাপ ভিউ তাদের বর্তমান কনফিগারেশন এবং অবস্থার সাথে কেমন হওয়া উচিত। আপনি কোডে কোনো পরিবর্তন করলে, অ্যাপের UI-তে রেন্ডারিংয়ের জন্য ন্যূনতম পরিবর্তনগুলি নির্ধারণ করতে উইজেটটি পূর্ববর্তী এবং বর্তমান উইজেটের পার্থক্য গণনা করে তার বিবরণ পুনর্নির্মাণ করে।

অ্যাপটি তৈরি করতে উইজেট একে অপরের সাথে নেস্ট করা হয়। এর মানে হল আপনার অ্যাপের রুটটি নিজেই একটি উইজেট এবং নিচের দিকেও একটি উইজেট। উদাহরণস্বরূপ, একটি উইজেট কিছু প্রদর্শন করতে পারে, নকশা নির্ধারণ করতে পারে, মিথস্ক্রিয়া পরিচালনা করতে পারে ইত্যাদি।

নীচের চিত্রটি উইজেট ট্রির একটি সাধারণ ভিজ্যুয়াল উপস্থাপনা।

আমরা এভাবে ফ্লাটার  উইজেট তৈরি করতে পারি:

Class ImageWidget extends StatelessWidget {  

         // Class Stuff  

}  

হ্যালো ওয়ার্ল্ড উদাহরণ

import 'package:flutter/material.dart';  

class MyHomePage extends StatelessWidget {    

  MyHomePage({Key key, this.title}) : super(key: key);    

  // This widget is the home page of your application.    

  final String title;    

  @override    

  Widget build(BuildContext context) {    

    return Scaffold(    

      appBar: AppBar(    

        title: Text(this.title),    

      ),    

      body: Center(    

        child: Text('Hello World'),    

      ),    

    );    

  }    

}   

 

উইজেটের প্রকারভেদ - Types of Widget

আমরা ফ্লাটার  উইজেটটিকে দুটি বিভাগে বিভক্ত করতে পারি:

দৃশ্যমান - Visible  (আউটপুট এবং ইনপুট)

অদৃশ্য - Invisible  (লেআউট এবং নিয়ন্ত্রণ)

 

দৃশ্যমান উইজেট - Visible Widget

দৃশ্যমান উইজেটগুলি ব্যবহারকারীর ইনপুট এবং আউটপুট ডেটার সাথে সম্পর্কিত। এই উইজেটের কিছু গুরুত্বপূর্ণ প্রকার হল:

Text

একটি টেক্সট উইজেট স্ক্রিনে প্রদর্শনের জন্য কিছু পাঠ্য ধারণ করে। আমরা টেক্সট textAlign প্রপার্টি ব্যবহার করে টেক্সট উইজেট সারিবদ্ধ করতে পারি , এবং স্টাইল প্রপার্টি টেক্সট কাস্টমাইজ করার অনুমতি দেয় যাতে ফন্ট, ফন্টের ওজন, ফন্ট স্টাইল, অক্ষর ব্যবধান, রঙ এবং আরও অনেক কিছু রয়েছে। আমরা নিচের কোড স্নিপেটের মত এটি ব্যবহার করতে পারি।

new Text(     

'Hello, Javatpoint!',     

textAlign: TextAlign.center,       

style: new TextStyle(fontWeight: FontWeight.bold),   

)  

 

Button

এই উইজেটটি আপনাকে ক্লিকে কিছু কাজ সম্পাদন করতে দেয়। ফ্লাটার  আপনাকে সরাসরি বোতাম উইজেট ব্যবহার করার অনুমতি দেয় না; পরিবর্তে, এটি একটি FlatButton এবং একটি RaisedButton এর মতো এক ধরণের বোতাম ব্যবহার করে। আমরা নিচের কোড স্নিপেটের মত এটি ব্যবহার করতে পারি।

//FlatButton Example  

new FlatButton(  

  child: Text("Click here"),  

  onPressed: () {  

    // Do something here  

  },  

),  

  

//RaisedButton Example  

new RaisedButton(  

  child: Text("Click here"),  

  elevation: 5.0,  

  onPressed: () {  

    // Do something here  

  },  

),  

 উপরের উদাহরণে, আপনি যখন বোতামে ক্লিক করেন তখন onPressed প্রপার্টি আমাদের একটি অ্যাকশন সঞ্চালনের অনুমতি দেয় এবং এটি কতটা আলাদা তা পরিবর্তন করতে elevation প্রপার্টি ব্যবহার করা হয়।

Image

এই উইজেটটি ইমেজটি ধারণ করে যা এটিকে একাধিক উত্স থেকে আনতে পারে যেমন সম্পদ ফোল্ডার থেকে বা সরাসরি URL থেকে। এটি ইমেজ লোড করার জন্য অনেক কনস্ট্রাক্টর প্রদান করে, যা নিচে দেওয়া হল:

Image: এটি একটি জেনেরিক ইমেজ লোডার, যা ImageProvider দ্বারা ব্যবহৃত হয় ।

asset: এটি আপনার প্রোজেক্ট অ্যাসেট ফোল্ডার থেকে ইমেজ লোড করে।

file: এটি সিস্টেম ফোল্ডার থেকে ছবি লোড করে।

memory: এটি মেমরি থেকে ইমেজ লোড করে।

network: এটি নেটওয়ার্ক থেকে ছবি লোড করে।

প্রজেক্টে একটি ছবি যোগ করার জন্য, আপনাকে প্রথমে একটি সম্পদ ফোল্ডার তৈরি করতে হবে যেখানে আপনি আপনার ছবিগুলি রাখবেন এবং তারপরে pubspec.yaml ফাইলে নীচের লাইনটি যুক্ত করুন৷

assets:  

  - assets/  

 এখন, ডার্ট ফাইলে নিম্নলিখিত লাইন যোগ করুন।

Image.asset ( 'assets/computer.png' )

hello world উদাহরণে নীচে দেখানো হয়েছে ।

class MyHomePage extends StatelessWidget {  

  MyHomePage({Key key, this.title}) : super(key: key);  

  // This widget is the home page of your application.  

  final String title;  

  @override  

  Widget build(BuildContext context) {  

    return Scaffold(  

      appBar: AppBar(  

        title: Text(this.title),  

      ),  

      body: Center(  

        child: Image.asset('assets/computer.png'),  

      ),  

    );  

  }  

} 

আপনি যখন অ্যাপটি চালাবেন, এটি নিম্নলিখিত আউটপুট দেবে।

Icon

এই উইজেটটি ফ্লাটারে আইকন সংরক্ষণ করার জন্য একটি ধারক হিসাবে কাজ করে। নিম্নলিখিত কোড আরও স্পষ্টভাবে ব্যাখ্যা করে।

new Icon(  

  Icons.add,  

  size: 34.0,  

)  

 

অদৃশ্য উইজেট - Invisible widget

অদৃশ্য উইজেটগুলি উইজেটগুলির বিন্যাস এবং নিয়ন্ত্রণের সাথে সম্পর্কিত। এটি উইজেটগুলি আসলে কীভাবে আচরণ করে এবং কীভাবে তারা স্ক্রিনে দেখাবে তা নিয়ন্ত্রণ করে। এই উইজেটগুলির কয়েকটি গুরুত্বপূর্ণ প্রকার হল:

Column

একটি কলাম উইজেট হল এক ধরনের উইজেট যা তার সমস্ত শিশুদের উইজেটগুলিকে একটি উল্লম্ব প্রান্তিককরণে সাজায়। এটি mainAxisAlignment এবং crossAxisAlignment বৈশিষ্ট্য ব্যবহার করে উইজেটগুলির মধ্যে ব্যবধান প্রদান করে । এই বৈশিষ্ট্যগুলিতে, প্রধান অক্ষটি উল্লম্ব অক্ষ এবং ক্রস অক্ষটি অনুভূমিক অক্ষ।

উদাহরণ

নিচের কোড স্নিপেট দুটি উইজেট উপাদান উল্লম্বভাবে তৈরি করে।

new Column(  

  mainAxisAlignment: MainAxisAlignment.center,  

  children: <Widget>[  

    new Text(  

      "VegElement",  

    ),  

    new Text(  

      "Non-vegElement"  

    ),  

  ],  

),  

 Row

সারি উইজেটটি কলাম উইজেটের মতো, তবে এটি উল্লম্বভাবে না হয়ে অনুভূমিকভাবে একটি উইজেট তৈরি করে। এখানে, প্রধান অক্ষটি অনুভূমিক অক্ষ এবং ক্রস অক্ষটি উল্লম্ব অক্ষ।

উদাহরণ

নীচের কোড স্নিপেটগুলি অনুভূমিকভাবে দুটি উইজেট উপাদান তৈরি করে।

new Row(  

  mainAxisAlignment: MainAxisAlignment.spaceEvenly,  

  children: <Widget>[  

    new Text(  

      "VegElement",  

    ),  

    new Text(  

      "Non-vegElement"  

    ),  

  ],  

),  

 Center

এই উইজেটটি চাইল্ড উইজেট কেন্দ্রে ব্যবহার করা হয়, যা এর ভিতরে আসে। সমস্ত পূর্ববর্তী উদাহরণ কেন্দ্র উইজেটের ভিতরে রয়েছে।

উদাহরণ

Center(  

  child: new clumn(  

    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  

    children: <Widget>[  

      new Text(  

        "VegElement",  

      ),  

      new Text(  

        "Non-vegElement"  

      ),  

    ],  

  ),  

),  

 

Padding

এই উইজেটটি অন্যান্য উইজেটগুলিকে নির্দিষ্ট দিকনির্দেশে প্যাডিং দিতে মোড়ানো করে। আপনি সব দিক থেকে প্যাডিং প্রদান করতে পারেন. আমরা নীচের উদাহরণ থেকে এটি বুঝতে পারি যা সমস্ত দিক থেকে 6.0 এর পাঠ্য উইজেট প্যাডিং দেয়।

উদাহরণ

Padding(  

  padding: const EdgeInsets.all(6.0),  

  child: new Text(  

    "Element 1",  

  ),  

),  

 

Scaffold

অ্যাপবার , ফ্লোটিং অ্যাকশন বোতাম, ড্রয়ার ইত্যাদির মতো সাধারণ উপাদান ডিজাইনের উপাদান যোগ করতে দেয় ।

Stack

এটি একটি অপরিহার্য উইজেট, যা মূলত একটি উইজেটকে overlapping করার জন্য ব্যবহৃত হয় , যেমন একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের একটি বোতাম।

রাজ্য ব্যবস্থাপনা উইজেট - State Management Widget

ফ্লাটারে, প্রধানত দুটি ধরণের উইজেট রয়েছে:

স্টেটলেস উইজেট - StatelessWidget

স্টেটফুল উইজেট - StatefulWidget

স্টেটফুল উইজেট- StatelessWidget

স্টেটফুল উইজেটে রাষ্ট্রীয় তথ্য থাকে। এটিতে প্রধানত দুটি শ্রেণী রয়েছে: state object এবং widget। এটি গতিশীল কারণ এটি উইজেট জীবদ্দশায় অভ্যন্তরীণ ডেটা পরিবর্তন করতে পারে। এই উইজেটে build() পদ্ধতি নেই। এটিতে createState( ) পদ্ধতি রয়েছে, যা একটি শ্রেণী প্রদান করে যা Flutters State ক্লাস প্রসারিত করে। স্টেটফুল উইজেটের উদাহরণ হল চেকবক্স, রেডিও, স্লাইডার, ইনকওয়েল , ফর্ম এবং টেক্সটফিল্ড ।

উদাহরণ

class Car extends StatefulWidget {  

  const Car({ Key key, this.title }) : super(key: key);   

  @override  

  _CarState createState() => _CarState();  

}  

class _CarState extends State<Car> {  

  @override  

  Widget build(BuildContext context) {  

    return Container(  

      color: const Color(0xFEEFE),  

           child: Container(  

            child: Container( //child: Container() )  

        )  

    );  

  }  

}  

স্টেটলেস উইজেট- StatefulWidget

স্টেটলেস উইজেটে কোনো রাষ্ট্রীয় তথ্য নেই। এটি তার জীবনচক্র জুড়ে স্থির থাকে। স্টেটলেস উইজেটের উদাহরণ হল টেক্সট, রো, কলাম, কন্টেইনার ইত্যাদি।

উদাহরণ

class MyStatelessCarWidget extends StatelessWidget {  

  const MyStatelessCarWidget ({ Key key }) : super(key: key);  

  @override  

  Widget build(BuildContext context) {  

    return Container(color: const Color(0x0xFEEFE));  

  }  

}