Sponsored

ফ্লাটার টেক্সট ফিল্ড

0
17

টেক্সট ইনপুট নেওয়ার জন্য টেক্সট ফিল্ড ব্যবহার করা হয়। চারপাশে বর্ডার যুক্ত একটা টেক্সট ফিল্ড আমরা এভাবে ব্যবহার করতে পারিঃ

TextField(
            decoration: InputDecoration(
              labelText: "Enter text",
              border: OutlineInputBorder(),
            ),
          ),

এখানে decoration প্রোপার্টি অপশনাল। decoration প্রোপার্টি ব্যবহার করে টেক্সট ফিল্ডে লেভেল এবং বর্ডার যোগ করেছি। সম্পূর্ণ প্রজেক্টঃ

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          minimum: EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(
              labelText: "Enter text",
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
    );
  }
}

যার আউটপুট পাবো এমনঃ

ইনপুট দিতে পারি কিন্তু ইনপুট নিয়ে কিছুই করছি না। ইনপুট নেওয়ার পর সেগুলো নিয়ে কাজ করার জন্য TextEditingController তৈরি করে নিতে হবে।

  final TextEditingController _controller = TextEditingController();

এরপর এই কন্ট্রোলার TextField এ ব্যবহার করতে হবে।

  TextField(
                controller: _controller,
)

আমরা একটা বাটন যোগ করতে পারি অ্যাপে। ঐ বাটনে ক্লিক করলে ইনপুট করা টেক্সট কনসোলে প্রিন্ট করবে। সম্পূর্ণ অ্যাপঃ

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          minimum: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _controller,
                decoration: InputDecoration(
                  labelText: "Enter text",
                  border: OutlineInputBorder(),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  print("TextField Value: ${_controller.text}");
                },
                child: Text("Print Value"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

কলাম ব্যবহার করে একের অধিক উইজেট একটার উপর আরেকটা স্ট্যাক আকারে প্লেস করা যায়। এখানে কলাম সম্পর্কে আমরা পরে বিস্তারিত জানব। উপরের অ্যাপ রান করলে এমন দেখতে পাবোঃ

এখন বাটন প্রেস করলে কনসোলে টেক্সট ফিল্ডের টেক্সট প্রিন্ট করবে। এবার একটা টেক্সট উইজেট যোগ করিঃ

 Text("TextField Value: ${_controller.text}"),

এই টেক্সট উইজেটে ইনপুট দেওয়া ভ্যালু দেখানোর কথা। কিন্তু দেখাচ্ছে না। ভ্যালু পরিবর্তন করার পর বাটনে প্রেস করার পরও দেখাচ্ছে না। কারণ কি?

এর কারণ হচ্ছে MyApp ক্লাস একটা স্টেটলেস উইজেট (Stateless Widget)। স্টেটলেস উইজেট বলতে এর স্টেট একবার বিল্ড করার পর আর পরিবর্তন করা যায় না। মানে কোন ভ্যালু পরিবর্তন হলেও UI আপডেট হবে না। যদি ভ্যালু পরিবর্তনের উপর নির্ভর করে UI আপডেট করতে চাই, তাহলে আমাদের ব্যবহার করতে হবে স্টেটফুল উইজেট (StatefulWidget)। যখন আমরা স্ট্যাটিক কোন কন্টেন্ট নিয়ে কাজ করব, তখন স্টেটলেস উইজেট ব্যবহার করব। আর যখন ডাইনামিক ডেটা নিয়ে কাজ করব, তখন স্টেটফুল উইজেট নিয়ে কাজ করব।

স্টেটফুল উইজেট তৈরি করার সময় আলাদা স্টেট ক্লাস তৈরি করতে হয়। যে ডেটা গুলো পরিবর্তন হতে পারে, ঐ ক্লাসে সেগুলো রাখা হয়। এখানে সম্পূর্ণ একটা উদাহরণ দেওয়া হলোঃ

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _text = ""; 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          minimum: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: "Enter text",
                  border: OutlineInputBorder(),
                ),
                onChanged: (value) {
                  setState(() {
                    _text = value; 
                  });
                },
              ),
              Text(
                "Entered Text: $_text",
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

যার আউটপুট পাবো এমনঃ

এখানে টেক্সট ফিল্ডে onChanged প্রোপার্টি যোগ করা হয়েছে। যখনি টেক্সট ফিল্ডে কোন লেখা ইনপুট দিবে, তখনি নিচের টেক্স উইজেটে তা দেখাবে।

পাসওয়ার্ড ফিল্ড

টেক্সট ফিল্ড ব্যবহার করে পাসওয়ার্ড ইনপুট নেওয়ার জন্য obscureText: true প্রোপার্টি ব্যবহার করতে পারি।

TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: "Password",
    border: OutlineInputBorder(),
  ),
);

কিবোর্ড টাইপ

কিবোর্ড টাইপ প্রোপার্টি ব্যবহার করে নাম্বার, ইমেইল ইত্যাদির জন্য স্পেশাল কিবোর্ড ব্যবহার করতে পারি। যেমন keyboardType: TextInputType.number শুধু মাত্র নাম্বার কিবোর্ড দেখাবে। আবার TextInputType.emailAddress ব্যবহার করলে ইমেইল ইনপুট নেওয়ার জন্য @ সাইন কিবোর্ডে যোগ করে দিবে।

একের অধিক লাইনের ইনপুট

সাধারণত টেক্সটফিল্ড সিংজ্ঞেল লাইন দেখায়। আমরা চাইলে একাধিক লাইনের টেক্সট ফিল্ড ব্যবহার করতে পারি maxLines প্রোপার্টি ব্যবহার করে। যেমনঃ

TextField(
  maxLines: 3,
);
Search
Categories
Read More
Nulled
Flutter App v1.3 - eBook with Admin Panel (Online eBook Reading, Download eBooks, Books App) Flutter 2.0 Source
Flutter App v1.3 – eBook with Admin Panel (Online eBook Reading, Download eBooks, Books...
By Nettumi 2026-09-18 03:25:37 0 36
Hacking Course
Samsung Galaxy S27 Ultra: সম্ভাব্য ফিচার ও স্পেসিফিকেশন
Samsung Galaxy S27 Ultra হতে পারে Samsung-এর পরবর্তী প্রিমিয়াম ফ্ল্যাগশিপ স্মার্টফোন। ফোনটি এখনো...
By Nettumi 2026-09-25 16:16:33 0 30
Nulled
Stocky v5.6 - Laravel POS & Inventory Management | ERP, HRM, WooCommerce & Online Store Script
Stocky v5.6 – Laravel POS & Inventory Management | ERP, HRM, WooCommerce & Online...
By Nettumi 2026-09-17 18:05:58 0 133
Tech
অত্যন্ত প্রয়োজনীয় ৩ টি টিপস এবং ট্রিকস | Techtunes | টেকটিউনস
টিউন্টারভিউ: হাসিন হায়দার, হেড অফ আইডিয়াস এবং প্রতিষ্ঠাতা, Leevio টিউন্টারভিউ হোস্ট : আরিফ...
By Nettumi 2026-09-25 03:57:31 0 30
Tech
বিকাশ এজেন্ট একাউন্ট খোলার নিয়ম ২০২৪ - Banglatech24.com
আপনি যদি বিকাশ এজেন্ট হতে চান, তাহলে এই পোস্টটি আপনার জন্য। বিকাশ এজেন্ট একাউন্ট খুলে বেশ লাভবান...
By Nettumi 2026-09-25 10:10:30 0 38
‎ ‎ ‎
Nettumi https://nettumi.com