Sayfanın tüm kaynak kodları şu şekilde. Ben bir türlü çıkamadım işin içinden. Umarım kolay bir çözümü vardır 🙂
import 'package:ciftbottom/my_flutter_app_icons.dart';
import 'package:flutter/material.dart';
class BottomBar extends StatefulWidget {
Color navBarBackColor;
Color iconEnabledColor;
Color iconDisabledColor;
Color unreadMsgColor;
int unreadMsg;
List<IconData> navIcons;
bool enAuxBar;
Color auxNavEnBgndCol;
Color auxNavDisBgndCol;
Color auxNavEnTextCol;
Color auxNavDisTextCol;
Color auxNavlikesBgndCol;
Color auxNavlikesNumCol;
IconData auxNavSetIcon;
IconData auxNavLikeIcon;
IconData auxNavNoLikeIcon;
int auxNavNLikes;
Color heartColor;
BottomBar({
this.navBarBackColor,
this.iconEnabledColor,
this.iconDisabledColor,
this.unreadMsgColor,
this.unreadMsg,
this.navIcons,
this.enAuxBar,
this.auxNavEnBgndCol,
this.auxNavDisBgndCol,
this.auxNavEnTextCol,
this.auxNavDisTextCol,
this.auxNavlikesBgndCol,
this.auxNavlikesNumCol,
this.auxNavSetIcon,
this.auxNavLikeIcon,
this.auxNavNoLikeIcon,
this.auxNavNLikes,
this.heartColor,
});
@override
_BottomBarState createState() => _BottomBarState();
}
class _BottomBarState extends State<BottomBar> {
int selectedIndex = 0;
void onItemTapped(int index) {
setState(() {
selectedIndex = index;
});
}
double bottomMargin;
@override
Widget build(BuildContext context) {
if (MediaQuery.of(context).viewInsets.bottom > 0) {
bottomMargin = MediaQuery.of(context).viewInsets.bottom -
MediaQuery.of(context).size.width * 0.15;
} else {
bottomMargin = MediaQuery.of(context).viewInsets.bottom;
}
return Container(
margin: EdgeInsets.only(bottom: bottomMargin),
height: MediaQuery.of(context).size.width * 0.25,
child: Stack(
overflow: Overflow.visible,
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.width * 0.2,
color: widget.navBarBackColor,
child: MainNavBar(
iconDisabledColor: widget.iconDisabledColor,
unreadMsg: widget.unreadMsg,
navIcons: widget.navIcons,
iconEnabledColor: widget.iconEnabledColor,
unreadMsgColor: widget.unreadMsgColor,
),
),
widget.enAuxBar
? Container(
margin: EdgeInsets.only(
bottom: MediaQuery.of(context).size.width * 0.15),
height: MediaQuery.of(context).size.width * 0.1,
child: AuxNavBar(
auxNavEnBgndCol: widget.auxNavEnBgndCol,
auxNavDisBgndCol: widget.auxNavDisBgndCol,
auxNavEnTextCol: widget.auxNavEnTextCol,
auxNavDisTextCol: widget.auxNavDisTextCol,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavSetIcon: widget.auxNavSetIcon,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
),
)
: Container()
],
),
);
}
}
class MainNavBar extends StatefulWidget {
Color iconEnabledColor;
Color iconDisabledColor;
Color unreadMsgColor;
int unreadMsg;
List<IconData> navIcons;
MainNavBar({
this.iconEnabledColor,
this.iconDisabledColor,
this.unreadMsgColor,
this.unreadMsg,
this.navIcons,
});
@override
_MainNavBarState createState() => _MainNavBarState();
}
class _MainNavBarState extends State<MainNavBar> {
List<Map<String, Object>> mainNavbarList = [
{'index': 0, 'active': true},
{'index': 1, 'active': false},
{'index': 2, 'active': false},
{'index': 3, 'active': false},
{'index': 4, 'active': false},
{'index': 5, 'active': false},
];
void activateIcon(val) {
print(val);
setState(() {
mainNavbarList.forEach((items) {
if (mainNavbarList[val]['index'] == items['index']) {
items['active'] = true;
} else {
items['active'] = false;
}
});
});
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MainNavBarItem(
index: mainNavbarList[0]['index'],
icon: widget.navIcons[0],
isActive: mainNavbarList[0]['active'],
function: activateIcon,
iconEnabledColor: widget.iconEnabledColor,
iconDisabledColor: widget.iconDisabledColor,
),
MainNavBarItem(
index: mainNavbarList[1]['index'],
icon: widget.navIcons[1],
isActive: mainNavbarList[1]['active'],
function: activateIcon,
iconEnabledColor: widget.iconEnabledColor,
iconDisabledColor: widget.iconDisabledColor,
),
MainNavBarItem(
index: mainNavbarList[2]['index'],
icon: widget.navIcons[2],
isActive: mainNavbarList[2]['active'],
function: activateIcon,
iconEnabledColor: widget.iconEnabledColor,
iconDisabledColor: widget.iconDisabledColor,
),
MainNavBarItem(
index: mainNavbarList[3]['index'],
icon: widget.navIcons[3],
isActive: mainNavbarList[3]['active'],
function: activateIcon,
iconEnabledColor: widget.iconEnabledColor,
iconDisabledColor: widget.iconDisabledColor,
),
MainNavBarItem(
index: mainNavbarList[4]['index'],
icon: widget.navIcons[4],
isActive: mainNavbarList[4]['active'],
function: activateIcon,
iconEnabledColor: widget.iconEnabledColor,
iconDisabledColor: widget.iconDisabledColor,
message: widget.unreadMsg,
unreadMsgColor: widget.unreadMsgColor,
),
MainNavBarItem(
index: mainNavbarList[5]['index'],
icon: widget.navIcons[5],
isActive: mainNavbarList[5]['active'],
function: activateIcon,
iconEnabledColor: widget.iconEnabledColor,
iconDisabledColor: widget.iconDisabledColor,
),
],
);
}
}
class MainNavBarItem extends StatefulWidget {
int index;
bool isActive;
IconData icon;
Function function;
int message;
Color unreadMsgColor;
Color iconEnabledColor;
Color iconDisabledColor;
MainNavBarItem(
{this.icon,
this.isActive,
this.index,
this.function,
this.message,
this.iconEnabledColor,
this.iconDisabledColor,
this.unreadMsgColor});
@override
_MainNavBarItemState createState() => _MainNavBarItemState();
}
class _MainNavBarItemState extends State<MainNavBarItem> {
Color iconColor;
@override
Widget build(BuildContext context) {
if (widget.isActive == true) {
iconColor = widget.iconEnabledColor;
} else {
iconColor = widget.iconDisabledColor;
}
return Stack(
alignment: Alignment.center,
overflow: Overflow.visible,
children: <Widget>[
Container(
padding: widget.isActive == true
? EdgeInsets.only(top: 4)
: EdgeInsets.all(0),
decoration: BoxDecoration(
border: widget.isActive == true
? Border(
bottom: BorderSide(
color: Colors.blue,
width: MediaQuery.of(context).size.width * 0.01,
),
)
: Border(),
),
child: IconButton(
icon: Icon(
widget.icon,
color: iconColor,
),
onPressed: () {
widget.function(widget.index);
},
),
),
widget.message != null && widget.message != 0
? Positioned(
bottom: widget.isActive == true
? MediaQuery.of(context).size.width * 0.054
: MediaQuery.of(context).size.width * 0.045,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
widget.message.toString(),
style: TextStyle(
color: widget.unreadMsgColor,
),
textAlign: TextAlign.center,
),
))
: Container(),
],
);
}
}
class AuxNavBar extends StatefulWidget {
Color auxNavEnBgndCol;
Color auxNavDisBgndCol;
Color auxNavEnTextCol;
Color auxNavDisTextCol;
Color auxNavlikesBgndCol;
Color auxNavlikesNumCol;
IconData auxNavSetIcon;
IconData auxNavLikeIcon;
IconData auxNavNoLikeIcon;
int auxNavNLikes;
Color heartColor;
AuxNavBar({
this.auxNavEnBgndCol,
this.auxNavDisBgndCol,
this.auxNavEnTextCol,
this.auxNavDisTextCol,
this.auxNavlikesBgndCol,
this.auxNavlikesNumCol,
this.auxNavSetIcon,
this.auxNavLikeIcon,
this.auxNavNoLikeIcon,
this.auxNavNLikes,
this.heartColor,
});
@override
_AuxNavBarState createState() => _AuxNavBarState();
}
class _AuxNavBarState extends State<AuxNavBar> {
List searchActive = [true, false, false];
void activateSearch(val) {
setState(() {
searchActive[0] = false;
searchActive[1] = false;
searchActive[2] = false;
searchActive[val] = true;
});
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.horizontal(
left: const Radius.circular(100.0),
right: const Radius.circular(100.0)),
),
child: Row(
children: <Widget>[
SearchBox(
index: 0,
leftRadius: 100,
rightRadius: 0,
isActive: searchActive[0],
functionBox: activateSearch,
auxNavEnBgndCol: widget.auxNavEnBgndCol,
auxNavDisBgndCol: widget.auxNavDisBgndCol,
auxNavEnTextCol: widget.auxNavEnTextCol,
auxNavDisTextCol: widget.auxNavDisTextCol,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavSetIcon: widget.auxNavSetIcon,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
),
Visibility(
visible: searchActive[0],
child: LikeBox(
rightRadius: 0,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
)),
SearchBox(
index: 1,
leftRadius: 0,
rightRadius: 0,
isActive: searchActive[1],
functionBox: activateSearch,
auxNavEnBgndCol: widget.auxNavEnBgndCol,
auxNavDisBgndCol: widget.auxNavDisBgndCol,
auxNavEnTextCol: widget.auxNavEnTextCol,
auxNavDisTextCol: widget.auxNavDisTextCol,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavSetIcon: widget.auxNavSetIcon,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
),
Visibility(
visible: searchActive[1],
child: LikeBox(
rightRadius: 0,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
)),
SearchBox(
index: 2,
leftRadius: 0,
rightRadius: 100,
isActive: searchActive[2],
functionBox: activateSearch,
auxNavEnBgndCol: widget.auxNavEnBgndCol,
auxNavDisBgndCol: widget.auxNavDisBgndCol,
auxNavEnTextCol: widget.auxNavEnTextCol,
auxNavDisTextCol: widget.auxNavDisTextCol,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavSetIcon: widget.auxNavSetIcon,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
),
Visibility(
visible: searchActive[2],
child: LikeBox(
rightRadius: 100,
auxNavlikesBgndCol: widget.auxNavlikesBgndCol,
auxNavlikesNumCol: widget.auxNavlikesNumCol,
auxNavLikeIcon: widget.auxNavLikeIcon,
auxNavNoLikeIcon: widget.auxNavNoLikeIcon,
auxNavNLikes: widget.auxNavNLikes,
heartColor: widget.heartColor,
)),
],
),
);
}
}
class SearchBox extends StatefulWidget {
double rightRadius;
double leftRadius;
bool isActive;
int index;
Function functionBox;
Color auxNavEnBgndCol;
Color auxNavDisBgndCol;
Color auxNavEnTextCol;
Color auxNavDisTextCol;
Color auxNavlikesBgndCol;
Color auxNavlikesNumCol;
IconData auxNavSetIcon;
IconData auxNavLikeIcon;
IconData auxNavNoLikeIcon;
int auxNavNLikes;
Color heartColor;
SearchBox({
this.leftRadius,
this.rightRadius,
this.isActive,
this.index,
this.functionBox,
this.auxNavEnBgndCol,
this.auxNavDisBgndCol,
this.auxNavEnTextCol,
this.auxNavDisTextCol,
this.auxNavlikesBgndCol,
this.auxNavlikesNumCol,
this.auxNavSetIcon,
this.auxNavLikeIcon,
this.auxNavNoLikeIcon,
this.auxNavNLikes,
this.heartColor,
});
@override
_SearchBoxState createState() => _SearchBoxState();
}
class _SearchBoxState extends State<SearchBox> with TickerProviderStateMixin {
AnimationController controller;
Animation bgColor;
@override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 1))
..addListener(() {
setState(() {});
});
bgColor =
ColorTween(begin: Colors.red, end: Colors.green).animate(controller);
controller.forward();
}
Color boxColor;
Color fontColor;
@override
Widget build(BuildContext context) {
if (widget.isActive == true) {
boxColor = bgColor.value;
fontColor = widget.auxNavEnTextCol;
if (widget.index == 2) {
widget.rightRadius = 0;
}
} else {
boxColor = widget.auxNavDisBgndCol;
fontColor = widget.auxNavDisTextCol;
}
return Container(
padding: EdgeInsets.symmetric(vertical: 5),
width: MediaQuery.of(context).size.width * 2 / 7,
decoration: BoxDecoration(
color: boxColor,
borderRadius: BorderRadius.horizontal(
left: Radius.circular(widget.leftRadius),
right: Radius.circular(widget.rightRadius),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
alignment: Alignment.center,
// padding: EdgeInsets.only(left: 5, top: 8),
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.1 * 0.25,
),
decoration: BoxDecoration(
color: boxColor,
borderRadius: BorderRadius.horizontal(
left: Radius.circular(widget.leftRadius),
right: Radius.circular(widget.rightRadius),
),
),
width: MediaQuery.of(context).size.width * 0.165,
child: TextFormField(
textAlignVertical: TextAlignVertical.center,
expands: true,
maxLines: null,
// keyboardType: TextInputType.multiline,
// maxLines: null,
textAlign: TextAlign.left,
autocorrect: true,
style: TextStyle(
fontSize: 11,
),
controller: TextEditingController(),
onFieldSubmitted: (_) {},
onTap: () {
setState(() {
widget.functionBox(widget.index);
});
},
decoration: InputDecoration(
border: InputBorder.none,
// border: OutlineInputBorder(),
hintText: 'Search \ntext here',
hintStyle: TextStyle(
fontSize: 11,
// wordSpacing: 2,
color: fontColor,
),
hintMaxLines: 2,
contentPadding: EdgeInsets.all(2)),
),
),
Visibility(
visible: widget.isActive,
child: Expanded(
// padding: EdgeInsets.only(right: 50),
// width: MediaQuery.of(context).size.width * 0.165,
child: IconButton(
alignment: Alignment.center,
padding: EdgeInsets.all(0),
onPressed: () {},
icon: Icon(
widget.auxNavSetIcon,
size: 25,
// color: fontColor,
),
),
),
)
],
),
);
}
}
class LikeBox extends StatefulWidget {
double rightRadius;
Color auxNavlikesBgndCol;
Color auxNavlikesNumCol;
IconData auxNavLikeIcon;
IconData auxNavNoLikeIcon;
int auxNavNLikes;
Color heartColor;
LikeBox({
this.rightRadius,
this.auxNavlikesBgndCol,
this.auxNavlikesNumCol,
this.auxNavLikeIcon,
this.auxNavNoLikeIcon,
this.auxNavNLikes,
this.heartColor,
});
@override
_LikeBoxState createState() => _LikeBoxState();
}
class _LikeBoxState extends State<LikeBox> {
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 1 / 7,
decoration: BoxDecoration(
color: widget.auxNavlikesBgndCol,
borderRadius: BorderRadius.horizontal(
right: Radius.circular(widget.rightRadius),
),
),
child: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
IconButton(
icon: widget.auxNavNLikes == 0
? Icon(
widget.auxNavNoLikeIcon,
color: widget.heartColor,
size: MediaQuery.of(context).size.width * 0.075,
)
: Icon(
widget.auxNavLikeIcon,
color: widget.heartColor,
size: MediaQuery.of(context).size.width * 0.075,
),
onPressed: () {},
),
widget.auxNavNLikes != 0
? Positioned(
child: Text(
widget.auxNavNLikes.toString(),
style: TextStyle(
fontSize: 11,
color: widget.auxNavlikesNumCol,
),
),
)
: Container()
],
),
),
);
}
}
