Flutter First Application...

Hello Developers...

අද අපේ Tutorial එකේ තුන් වෙනි දවස . අද අපි අපේ  Flutter First Application එක  Develop කරමු. 

Step 1 − Open Android Studio

Step 2 − Create Flutter Project. For this, click File → New → New Flutter Project

Step 3 − Select Flutter Application. For this, select Flutter Application and click Next

Step 4 − Configure the application as below and click Next.

• Project name: hello_app

• Flutter SDK Path: 

• Project Location: 

යෙදුමේ ව්යුහයේ විවිධ සංරචක මෙහි විස්තර කෙරේ

• android − Auto generated source code to create android application

• ios − Auto generated source code to create ios application

• lib − Main folder containing Dart code written using flutter framework

• ib/main.dart − Entry point of the Flutter application

• test − Folder containing Dart code to test the flutter application

• test/widget_test.dart − Sample code

• .gitignore − Git version control file

• .metadata − auto generated by the flutter tools

• .packages − auto generated to track the flutter packages

• .iml − project file used by Android studio

• pubspec.yaml − Used by Pub, Flutter package manager

• pubspec.lock − Auto generated by the Flutter package manager, Pub

• README.md − Project description file written in Markdown format

පියවර 7 - lib/main.dart ගොනුවේ ඇති ඩාර්ට් කේතය පහත කේතය සමඟ ප්‍රතිස්ථාපනය කරන්න 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

අපි Dart Coded පේළියෙන් පේළිය තේරුම් ගනිමු.

• පේළිය 1 - ෆ්ලටර් පැකේජය, ද්‍රව්‍ය ආනයනය කරයි.
• ද්‍රව්‍යය යනු ඇන්ඩ්‍රොයිඩ් විසින් නිශ්චිතව දක්වා ඇති ද්‍රව්‍ය සැලසුම් මාර්ගෝපදේශවලට අනුව පරිශීලක
• අතුරුමුහුණත නිර්මාණය කිරීම සඳහා වන ෆ්ලටර් පැකේජයකි.
• පේළිය 3 - මෙය Flutter යෙදුමේ ඇතුල් වීමේ ස්ථානයයි.
• RunApp ශ්‍රිතය අමතා එය MyApp පන්තියේ වස්තුවක් බවට පත් කරයි.
• runApp ශ්‍රිතයේ පරමාර්ථය වන්නේ ලබා දී ඇති විජට් තිරයට ඇමිණීමයි.
• පේළිය 5-17 - විජට් ෆ්ලටර් රාමුව තුළ UI නිර්මාණය කිරීමට භාවිතා කරයි.
• StatelessWidget යනු විජට් එකකි,
• එය විජට් එකේ කිසිදු තත්වයක් පවත්වා නොගනී.
• MyApp StatelessWidget දිගු කර එහි ගොඩනැගීමේ ක්‍රමය අභිබවා යයි.
• ගොඩනැගීමේ ක්‍රමයේ අරමුණ වන්නේ යෙදුමේ UI හි කොටසක් නිර්මාණය කිරීමයි.
• මෙහිදී, ගොඩනැගීමේ ක්‍රමය යෙදුමේ මූල මට්ටමේ UI නිර්මාණය කිරීමට MaterialApp,
• widget භාවිතා කරයි. එහි ගුණාංග තුනක් ඇත - මාතෘකාව, තේමාව.

පේළිය 19 - 38 - Scaffold Widget ආපසු ලබා දීම හැර MyHomePage MyApp හා සමාන වේ.

Scaffold යනු UI අනුකූල ද්‍රව්‍ය නිර්මාණය සෑදීමට භාවිතා කරන MaterialApp විජට් අසල ඇති ඉහළ මට්ටමේ විජට් එකකි. එයට වැදගත් ගුණාංග දෙකක් ඇත,

යෙදුමේ ශීර්ෂය පෙන්වීමට appBar සහ යෙදුමේ සත්‍ය අන්තර්ගතය පෙන්වීමට ශරීරය.

AppBar යනු යෙදුමේ ශීර්ෂය විදැහුම් කිරීමට තවත් widget එකක් වන අතර අපි එය appBar property තුළ භාවිතා කර ඇත.

ශරීර දේපල තුළ, අපි මධ්‍යස්ථ විජට් භාවිතා කර ඇත, එය child widget මධ්‍යගත කරයි. 

අපි වෙන Tutorial එකකින් APP BAR එක ගැන කතා කරමු 

අද ට අපේ tutorial එක end කරනවා මන් හිතේනවා ඔයාලටත් out put ඇවිත් ඇති කියලා.  මොන හරි ගැටලු තියෙනවන් අපේ comment section එක ට comment කරන්න. 

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