Hello developers...
Bottom Navigation Bar එක යනු යෙදුමේ විවිධ පිටු තේරීම හෝ සංචාලනය කිරීම සඳහා යෙදුමක පතුලේ ඇති ද්‍රව්‍ය විජට් වේ. එය සාමාන්‍යයෙන් Scaffold.bottomNavigationBar තර්කය ලෙස සපයා ඇති පලංචියක් සමඟ ඒකාබද්ධව භාවිතා වේ.
flutter ඔබට BottomNavigationBar පන්තිය ලබා දුන්නද, මෙම ලිපියෙන් ඔබ ඔබේම පහළ සංචාලන තීරුව සාදා ගන්නේ කෙසේදැයි ඉගෙන ගනු ඇත. මෙය ගැඹුරු නිබන්ධනයක් වනු ඇත.
පහළ සංචාලන ගුණාංගය ක්‍රියාත්මක කිරීමෙන් ඔබට පෙනෙන පරිදි, bottomNavigationBar විශේෂයෙන් විජට් එකක් ගැන සඳහන් නොකරයි. Scaffold හි bottomNavigationBar ගුණාංගයට අපගේ තේරීමේ විජට් පැවරීමට මෙය අපට නම්‍යශීලී බවක් ලබා දෙයි.
අපි දැන් Bottom Navigation Bar එක නිර්මාණය කරමු.
ඔබ ඔබේ මූලික flutter යෙදුම ක්‍රියාත්මක කර ක්‍රියාත්මක වූ පසු, ඔබේ ද්‍රව්‍ය යෙදුම MyHomePage() හි ඇත .
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
දැන් විජට් එකක් සාදා එය MyHomePage ලෙස නම් කරන්න. MyHomePage පන්තියෙන් පලංචියක් ආපසු දෙන්න. දැන් මෙම පලංචිය අපගේ පහළ සංචාලන තීරුව අඩංගු ප්‍රධාන අංගයයි.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
විශේෂ කරුණු*
අපගේ පහළ සංචාලන තීරුව සෑදීමට පෙර, පිටු 2-5ක් සාදන්න. සෑම විටම ඔබගේ පහළ සංචාලන තීරුව අවම වශයෙන් අයිතම 5ක් (පිටු) තබා ගැනීමට උත්සාහ කරන්න. පිටු යනු ඔබගේ යෙදුමේ විවිධ තිර වේ.
මෙම නිබන්ධනය සඳහා, අපි යම් පෙළක් සමඟ මූලික ටැබ් 4ක් සාදන්නෙමු. MyHomePage පන්තියේ int විචල්‍යයක් _currentindex ලෙස ප්‍රකාශ කරයි එය 0 ලෙස ආරම්භ කරන්න. සෑම විටම, අපි පළමු පිටුවෙන් ආරම්භ කරන යෙදුම විවෘත කරමු. ඔබට අවශ්‍ය පරිදි විචල්‍යය නම් කළ හැක. The_currentindex යනු ඔබගේ වත්මන් පිටුවේ දර්ශකය රඳවා තබා ගැනීමයි. දැන් අවසාන ලැයිස්තුවක් ටැබ් ලෙස නිර්වචනය කරන්න මෙම ලැයිස්තුව අපගේ යෙදුමේ සියලුම ටැබ් රඳවා තබා ගනී.
int _currentindex = 0;
final tabs = [
Center(child: Text('Home'),),
Center(child: Text('Search'),),
Center(child: Text('Add'),),
Center(child: Text('Account'),),
];
දැන් අපි අපගේ පහළ සංචාලන තීරුව නිර්මාණය කරමු. MyHomePage පන්තියේ අපි පහළ සංචාලන තීරුව නිර්වචනය කරමු.
bottomNavigationBar: BottomNavigationBar( .... )
සියලුම Code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _currentindex = 0;
final tabs = [
Center(child: Text('Home'),),
Center(child: Text('Search'),),
Center(child: Text('Add'),),
Center(child: Text('Account'),),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.menu),
),
title: const Text('Bottom Navigation Bar'),
backgroundColor: Colors.purple,
),
body: tabs[_currentindex] ,//Container
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentindex,
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.purple,
fixedColor: Colors.white,
unselectedItemColor: Colors.white,
showUnselectedLabels: false,
elevation: 0,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.lightGreen,
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_box_outlined),
label: 'Add',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle_rounded),
label: 'Account',
),
],
onTap: (index) {
setState(() {
_currentindex = index;
});
},
),
);
}
}
We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk
0 Comments