Patrocinados

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

0
19

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

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,
);
Buscar
Categorías
Read More
Nulled
CTX Feed Pro 8.0.6 – WooCommerce Product Feed Manager Plugin
CTX Feed Pro is the most optimized & error-free WooCommerce product feed manager that makes...
By Nettumi 2026-10-02 18:09:45 0 0
Tech
HTML, CSS এবং Javascript ব্যবহার করে তৈরি করুন উইন্ডোজ, লিনাক্স বা ম্যাক এর জন্য সফটওয়ার।
জাভাস্কিপ্ট ওয়েবে অনেক পাওয়ারফুল স্কিপ্টিং ল্যাঙ্গুয়েজ। তবে কোড গুলো সহজেই দেখা যায়, তাই কোন...
By Nettumi 2026-09-30 18:44:06 0 40
Nulled
Airtel Sim এর Calling History দেখে নিন খুবই সহজে ভিডিও টিঊটোরিয়াল | Techtunes | টেকটিউনস
অ্যাপল মানুষকে ফিরিয়ে নিচ্ছে হাত ঘড়ির যুগে… অসামান্য প্রাযুক্তিক উৎকর্ষতায়! একটি Apple...
By Nettumi 2026-09-21 05:27:34 0 55
Nulled
OnePlus 13s-এর নতুন Update - Bypass Charging এবং 50MP Photo Editing-সহ ইন-ডেপথ সবকিছু! | Techtunes | টেকটিউনস
অ্যাপল মানুষকে ফিরিয়ে নিচ্ছে হাত ঘড়ির যুগে… অসামান্য প্রাযুক্তিক উৎকর্ষতায়! একটি Apple...
By Nettumi 2026-09-21 05:33:18 0 37
Nulled
MP3 Sticky Player WordPress Plugin v9.0
MP3 Sticky Player WordPress Plugin v9.0 Free Download. MP3 Sticky Player WordPress Plugin is a...
By Nettumi 2026-09-17 18:05:26 0 65
‎ ‎ ‎
Nettumi https://nettumi.com