Apps Lanka.

Hello developers....

මොකක්ද  මේ Flutter Text Widget එක කියන්නේ ?

මෙම නිබන්ධනයේදී, අපි උදාහරණයක් භාවිතා කරමින් Flutter Application හි Text Field widget එකක් භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගනිමු.

පරිශීලකයාගෙන් පෙළ ආදානය ලබා ගැනීමට Text Field භාවිතා කරයි. Text Field හි පෙරනිමි හැසිරීම නම්, ඔබ එය මත එබූ විට, එය නාභිගත වන අතර තිරයේ පහළින් යතුරු පුවරුවක් ලිස්සා යාමයි. ඔබ යතුරුපුවරුව භාවිතයෙන් පෙළ ඇතුලත් කරන විට, තන්තුව TextField හි දර්ශනය වේ.

TextField පාලකයට TextEditingController එකක් ඇමිණීමෙන් ඔබට TextField හි ඇතුළත් කළ අගයට ප්‍රවේශ විය හැක. නැතහොත් ඔබට TextField හි onChanged() ශ්‍රිතය භාවිතයෙන් අගයට ප්‍රවේශ විය හැක.

උදාහරණ

මෙම උදාහරණයේදී, අපි TextField එකක් පෙන්වීමට යනවා. ඔබ එය එබූ විට, පෙරනිමියෙන් යතුරු පුවරුවක් දිස්වේ. ඔබ යම් ආදානයක් ටයිප් කිරීමට පටන් ගන්නේ නම්, ඔබ TextField හි අගයට කරන සෑම වෙනසක් සඳහාම onChanged() ශ්‍රිතය ක්‍රියාරම්භ කරන අතර මෙම උදාහරණයේ TextField විජට්ටුවට පහළින් ඇති Text widget TextField හි වෙනස් වූ අගය සමඟ යාවත්කාලීන වේ.

දැනටමත් සඳහන් කර ඇති පරිදි ඔබට TextEditingController භාවිතයෙන් TextField හි අගයට ප්‍රවේශ විය හැක.

 main.dart File 

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State {
  TextEditingController nameController = TextEditingController();
  String fullName = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter TextField'),
          ),
          body: Center(child: Column(children: [
            Container(
                margin: EdgeInsets.all(20),
                child: TextField(
                  controller: nameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Full Name',
                  ),
                  onChanged: (text) {
                    setState(() {
                      fullName = text;
                      //you can access nameController in its scope to get
                      // the value of text entered as shown below
                      //fullName = nameController.text;
                    });
                  },
                )),
            Container(
              margin: EdgeInsets.all(20),
              child: Text(fullName),
            )
          ]))),
    );
  }
}

 We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk