Elevated Button Flutter In Sinhala

Hello developers

Elevated Button යනු ද්‍රව්‍ය පැකේජය තුළ ඇතුළත් කර ඇති flutter සංරචකයකි, එනම් “package:flutter/material.dart“. මෙම බොත්තම් රඳවා තබා ගන්නා ප්‍රධාන ලක්ෂණය වන්නේ පරිශීලකයා තට්ටු කරන විට ඒවායේ මතුපිට තිරය දෙසට මඳක් ඉහළ යාමයි. සරල භාෂාවෙන්, උස් බොත්තම් යනු පැහැදිලිව නිර්වචනය කරන ලද බොත්තම් මෝස්තරයක් නොමැති අත් නොහරින ලද ඔසවන ලද බොත්තම් වේ. උස් කරන ලද බොත්තම් මෝස්තර කළ නොහැක, එනම් ඔබට බොත්තමේ වර්ණය, අකුරු ප්‍රමාණය, පෙළ විලාසය යනාදිය උස් කරන ලද බොත්තම් මෙන් පැහැදිලිව වෙනස් කළ නොහැක. මෙම පන්තිය flutter හි 1.22 අනුවාදයෙන් දියත් කරන ලදී. ඔබට කුඩා දරුවෙකු ලෙස පෙළ හෝ අයිකන ඔවුන් වෙත ලබා දිය හැක.Elevated Buttonහි මෝස්තරය හැසිරවීමට, අවශ්‍යතා අනුව බොත්තමක් හැඩගැන්වීමට ඉඩ සලසන ButtonStyle පන්තියක් භාවිතා කරයි.

Constructor for Elevated Button

ElevatedButton.icon({

  Key? key, 

  required VoidCallback? onPressed, 

  VoidCallback? onLongPress, 

  ValueChanged? onHover, 

  ValueChanged? onFocusChange, 

  ButtonStyle? style, 

  FocusNode? focusNode, 

  bool? autofocus, 

  Clip? clipBehavior, 

  required Widget icon, 

  required Widget label

})

Parameters

Elevated Button offers two important parameters:

1. child: this represents the button’s label.

ElevatedButton(

child: const Text('Raised Button'),

2. onPressed: this represents the action to be executed when the button is tapped

onPressed: () => Navigator.of(context)

.push(MaterialPageRoute(builder: (context) => const HomeScreen())),

Here, when the button is tapped a navigation action to HomeScreen is executed.

Properties of Elevated Button

autofocus: gives a boolean value corresponding to the initial focus of the button.
clipBehaviour: decides whether the content is clipped or not.
focusNode: represents the focus node of the widget
ButtonStyle style: decides the styling of the button
onLongPress: the action to be executed when the button is long pressed by the user
enabled: gives a boolean value for the activity of the button
hashcode: decides the hashcode of the button
Key: Controls how one widget replaces another widget in the tree.
onFocusChanged: a method to be executed on changing the focus of the button
onHover: actin to be executed when the user hovers the button

Methods Provided in an Elevated Button

createElement(): create a StatefulElement to manage button’s location in the widget tree.
createState(): Creates the mutable state for this widget at a given location in the tree.
build(BuildContext context): Describes the part of the user interface
createElement(): creates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node’s children
debugFillProperties(): Add additional properties associated with the node
noSuchMethod(): Invoked when a non-existent method or property is accessed
toDiagnosticsNode(): Returns a debug representation of the object that is used by debugging tools
toString(): A string representation of this object
toStringDeep(): Returns a string representation of this node and its descendants.
toStringShallow(): Returns a one-line detailed description of the object
toStringShort(): A short, textual description of this widget.

Styling a Button

The styling of an elevated button is quite different from the rest of the buttons. You have to use ButtonStyle as a style parameter. After that, pass ElevatedButtonThemeData is passed as button theme to ThemeData. Styling for elevated buttons is done using ElevatedButton.styleFrom. Specific styling for a button explicitly is done using ButtonStyle parameter as given below:

ElevatedButton(

child: Text('Pree Me'),

style: ElevatedButton.styleFrom(

primary: Colors.green,

onPressed: () {},

Changing Text Style

Passing values to the textStyle property of the button helps in altering the text styling

ElevatedButton(

child: Text('Elevated Button'),

style: ElevatedButton.styleFrom(

primary: Colors.green,

textStyle: const TextStyle(

color: Colors.white,

fontSize: 10,

fontStyle: FontStyle.normal),

onPressed: () {},

Complete Example

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}


class MyAppextends StatefulWidget {

HomeApp({Key? key}) : super(key: key);


@override

State createState() => _MyAppState();

}


class _MyAppState extends State {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: Scaffold(

appBar: AppBar(

backgroundColor: Colors.green,

title: const Text('Apps Lanka Dev'),

),

body: const FirstScreen()));

}

}


class FirstScreen extends StatelessWidget {

const FirstScreen({Key? key}) : super(key: key);


@override

Widget build(BuildContext context) {

return Container(

child: Center(

child: ElevatedButton(

child: Text('Press Me'),

style: ElevatedButton.styleFrom(

primary: Colors.green,

// side: BorderSide(color: Colors.yellow, width: 5),

textStyle: const TextStyle(

color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),

shape: BeveledRectangleBorder(

borderRadius: BorderRadius.all(Radius.circular(10))),

shadowColor: Colors.lightBlue,

),

onPressed: () => Navigator.of(context)

.push(MaterialPageRoute(builder: (context) => const HomeScreen())),

),

),

);

}

}


class HomeScreen extends StatefulWidget {

const NewScreen({Key? key}) : super(key: key);


@override

State createState() => _HomeScreenState();

}


class _HomeScreenState extends State {

TextEditingController textEditingController = TextEditingController();


@override

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Colors.green,

title: const Text('Home Screen'),

),

body: Center(child:  Column(

children [

Text(‘Welcome to Home Screen’),

SizeBox(height: 10),

ElevatedButton(

          child: Text('Go Back'),

          style: ElevatedButton.styleFrom(

            primary: Colors.green,

          ),

          onPressed: () {

Navigator.pop(context);


},

        ),


],


),

),

);

}

}

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

Apps Lanka.