Apps Lanka.

Hello Developers..... 

අපි බලමු App Bar කියන්නේ මොකක්ද කියලා 

• AppBar සාමාන්‍යයෙන් යෙදුමේ ඉහළම අංගය වේ (හෝ සමහර විට පහළම කොටස), එහි මෙවලම් තීරුව සහ වෙනත් පොදු ක්‍රියා බොත්තම් අඩංගු වේ. ෆ්ලටර් යෙදුමක ඇති සියලුම සංරචක විජට් එකක් හෝ විජට් සංයෝගයක් වන බැවින්. එබැවින් AppBar යනු ඇප්බාර් හි ක්‍රියාකාරීත්වය ලබා දෙන ෆ්ලටර් හි ඇති පන්තියක් හෝ විජට් එකක් ද වේ. AppBar විජට්ටුව ද්‍රව්‍ය නිර්මාණය මත පදනම් වන අතර AppBar හි අන්තර්ගතය තැබිය යුත්තේ කොතැනද යන්න පිළිබඳව බොහෝ තොරතුරු MediaQuery, Scaffold වැනි අනෙකුත් පන්ති මගින් දැනටමත් සපයා ඇත. AppBar පන්තිය ඉතා නම්‍යශීලී වන අතර පහසුවෙන් අභිරුචිකරණය කළ හැකි වුවද, අපට යෙදුම් තීරුවට අනුචලනය කළ හැකි ක්‍රියාකාරීත්වය ලබා දෙන SilverAppBar විජට් ද භාවිතා කළ හැකිය. නැතහොත් මුල සිටම අපට අපගේම අභිරුචි යෙදුම් තීරුවක් නිර්මාණය කළ හැකිය.

Constructor of AppBar class:

AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)

App bar Widget හි ප්‍රධාන අoග:

• actions: This property takes in a list of widgets as a parameter to be displayed after the title if the AppBar is a row.
• title: This property usually takes in the main widget as a parameter to be displayed in the AppBar.
• backgroundColor: This property is used to add colors to the background of the Appbar.
• elevation: This property is used to set the z-coordinate at which to place this app bar relative to its parent.
• shape: This property is used to give shape to the Appbar and manage its shadow

App Bar එක අපේ App එකට යොදාගමු 

Scafflod එක ඇතුලේ මේ code එක copy කරලා run කරන්න ...

Scaffold(
   appBar: AppBar( //appbar widget on Scaffold
          title:Text("AppBar"), //title aof appbar
          backgroundColor: Colors.redAccent, //background color of appbar
    ),
)

අපි දැන් බලමු App Bar ප්‍රධාන අoග විස්තර සහිත ව ....

Leading

AppBar( //appbar widget on Scaffold
  leading: IconButton( //menu icon button at start left of appbar
    onPressed: (){
         //code to execute when this button is pressed
    },
    icon: Icon(Icons.menu),
  ),
),

automaticallyImplyLeading

AppBar(
  automaticallyImplyLeading: false,
)

title 

AppBar(
  title:Text("My First Application "),
)

 actions 

AppBar(
  actions: [
    IconButton(
      icon: Icon(Icons.person), 
      onPressed: (){
        //code to execute when this button is pressed
      }
    ),

    IconButton(
      icon: Icon(Icons.search), 
      onPressed: (){
        //code to execute when this button is pressed
      }
    ),

    //more widgets to place here
  ],
)

අද ට අපේ 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