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

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

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,
);

Leave a Comment