I have this:
And I want to do this:
I find out that I have 2 ways to do this:
Cutting my circle widget on bottom by some pixels
Hide circle widget behind bottomnavigationbar (preferred)
Well, I don't know how to implement code in any of these 2 ways.
My code:
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FittedBox(
fit: BoxFit.scaleDown,
child: Container(
margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
width: 80,
height: 80,
child: SizedBox(
height: 80,
child: SpeedDial(
foregroundColor: Colors.white,
overlayColor: Colors.white10,
elevation: 0,
backgroundColor: const Color.fromARGB(255, 105, 30, 0),
childrenButtonSize: (const Size.square(100)),
direction: SpeedDialDirection.left,
child: const Icon(
Icons.add,
size: 48,
),
children: [
SpeedDialChild(
backgroundColor:
const Color.fromARGB(190, 105, 30, 1),
child: const Icon(
Icons.ac_unit_sharp,
size: 40,
))
])))),
bottomNavigationBar: Container(
decoration: const BoxDecoration(
border: Border(top: BorderSide(color: Colors.white, width: 2))),
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Znajomi',
backgroundColor: Color.fromARGB(190, 105, 30, 1),
),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.map),
label: 'Mapa',
backgroundColor: Color.fromARGB(210, 105, 30, 1),
),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.crown),
label: 'Ranking',
backgroundColor: Color.fromARGB(190, 105, 30, 1),
),
],
type: BottomNavigationBarType.shifting,
currentIndex: _selectedIndex,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.white,
showSelectedLabels: false,
iconSize: 38,
onTap: _onItemTap,
elevation: 0),
),
);
You can use the Stack widget for overlaying widgets on top of each other. If you place your BottomNavigationBar above your circle widget in the Stack the circle widget will be hidden behind the BottomNavigationBar.
Stack(
children: <Widget>[
FittedBox(),
BottomNavigationBar(),
],
)
Example here with Containers:
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)
Related
I want to align the switch button to Top right side (marked in the picture)
What i did,
I tried FlutterSwitch wrap with container and set aligment. It didn't work.
then i tried Positioned, It also didn't work
Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: FlutterSwitch(
value: isSwitchOn,
onToggle: (value) {
setState(() {
isSwitchOn = value;
});
},
width: 60.0,
height: 40.0,
toggleSize: 28.0,
activeToggleColor: const Color.fromARGB(255, 113, 82, 173),
inactiveToggleColor: const Color(0xFF2F363D),
activeColor: const Color.fromARGB(255, 49, 32, 82),
inactiveColor: Colors.grey,
activeIcon: const Icon(
Icons.nightlight_round,
color: Color(0xFFF8E3A1),
),
inactiveIcon: const Icon(
Icons.wb_sunny,
color: Color(0xFFF8E3A1),
),
),
),
],
),
),
),
);
Just wrap the FlutterSwitch widget with the IntrinsicWidth widget and it should work. Also, use Alignment.centerRight instead of Alignment.topRight.
Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: IntrinsicWidth(
child: FlutterSwitch(
value: isSwitchOn,
onToggle: (value) {
setState(() {
isSwitchOn = value;
});
},
width: 60.0,
height: 40.0,
toggleSize: 28.0,
activeToggleColor: const Color.fromARGB(255, 113, 82, 173),
inactiveToggleColor: const Color(0xFF2F363D),
activeColor: const Color.fromARGB(255, 49, 32, 82),
inactiveColor: Colors.grey,
activeIcon: const Icon(
Icons.nightlight_round,
color: Color(0xFFF8E3A1),
),
inactiveIcon: const Icon(
Icons.wb_sunny,
color: Color(0xFFF8E3A1),
),
),
),
),
],
),
),
),
);
What you were doing was like a shortcut, instead of doing that wrap the widget, and also use flexible or expanded to make the widget more responsive
Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Flexible(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: IntrinsicWidth(
child: FlutterSwitch(
value: isSwitchOn,
onToggle: (value) {
setState(() {
isSwitchOn = value;
});
},
width: 60.0,
height: 40.0,
toggleSize: 28.0,
activeToggleColor: const Color.fromARGB(255, 113, 82, 173),
inactiveToggleColor: const Color(0xFF2F363D),
activeColor: const Color.fromARGB(255, 49, 32, 82),
inactiveColor: Colors.grey,
activeIcon: const Icon(
Icons.nightlight_round,
color: Color(0xFFF8E3A1),
),
inactiveIcon: const Icon(
Icons.wb_sunny,
color: Color(0xFFF8E3A1),
),
),
),
],
),
),
),
),
);
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 12, 12, 12),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.fromLTRB(0, 0, 20, 100),
child: Stack(
alignment: Alignment.center,
children: [
Container(
color: const Color.fromARGB(255, 27, 27, 27),
width: 200,
height: 50,
margin: const EdgeInsets.fromLTRB(0, 0, 0, 300),
alignment: Alignment.center,
child: Container(
margin: const EdgeInsets.fromLTRB(150, 0, 0, 0),
width: 34,
height: 34,
child: Stack(
children: [
OutlinedButton(
child: Icon(Icons.add),
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.transparent,
side: BorderSide(
color: Color.fromARGB(255, 255, 106, 0),
width: 2),
),
),
],
),
),
),
I am trying to center the "+" Icon in the center of the button but for some reason it doesnt let me with margin and alignment and center widget am I doing something wrong? please help thank you.
the icon problem
Try below code only
OutlinedButton(
child: Icon(Icons.add),
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.transparent,
side: BorderSide(
color: Color.fromARGB(255, 255, 106, 0),
width: 2,
),
),
),
Result->
You don't need to use Stack() just wrap with Center
Container(
margin: const EdgeInsets.fromLTRB(150, 0, 0, 0),
width: 34,
height: 34,
child: Center(
child: OutlinedButton(
child: Icon(Icons.add),
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.transparent,
side: BorderSide(
color: Color.fromARGB(255, 255, 106, 0),
width: 2),
),
),
)
),
I would like when click on my edit button, my sliding up panel trigger and opens !
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text(
"Modifier Profil",
style: TextStyle(
color: Color.fromARGB(255, 41, 40, 40),
fontWeight: FontWeight.w500),
),
backgroundColor: Color.fromARGB(255, 252, 249, 249),
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.arrow_back),
color: Colors.black,
),
//actions: [IconButton ( onPressed: () {}, icon: Icon(Icons.check), color: Colors.amber,)],
),
body: SlidingUpPanel(
body: Container(
margin: EdgeInsets.only(left: 15, top: 20, bottom: 20),
//color: Colors.blue,
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: ListView(
scrollDirection: Axis.vertical,
children: [
Center(
child: Stack(
children: [
CircleAvatar(
maxRadius: 58,
backgroundColor: Colors.white,
child: CircleAvatar(
maxRadius: 55,
foregroundImage: AssetImage("images/profile.png"),
),
),
Positioned(
bottom: 0,
top: 70,
right: 0,
child: CircleAvatar(
radius: 17,
backgroundColor: Colors.white,
)),
Positioned(
bottom: 0,
top: 70,
right: 0,
child: CircleAvatar(
radius: 15,
backgroundColor: Colors.amber,
child: IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(
Icons.edit,
color: Colors.white,
),
),
)),
],
),
),
Declare a PanelController and in the onPressed method of your button you will be able to open and close the panel.
PanelController panelController=PanelController();
body: SlidingUpPanel(
controller:panelController,
.
.
body:ElevatedButton(
child:Text("edit"),
onPressed: (){
panelController.isPanelOpen?
panelController.close():panelController.open();
}
P.S. Would recommend you to check out Modal Bottom Sheet
i'm getting a bug where button click animation always show behind the stack
bottomNavigationBar: Stack(
children: [
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(...),
BottomNavigationBarItem(...),
BottomNavigationBarItem(...),
// Imitate an invisible icon
BottomNavigationBarItem(
icon: const Icon(Icons.add_circle, size: 0),
title: const Text(''),
),
],
currentIndex: _selectedIndex,
fixedColor: Colors.indigo,
onTap: _onItemTapped,
iconSize: 24,
),
Positioned(
right: 32.0,
top: 8.5,
child: CircleAvatar(
child: IconButton(
splashColor: Colors.green,
icon: Icon(Icons.add),
onPressed: () {},
),
),
)
],
),enter image description here
wrap your icon button with the Material widget
Material(
borderRadius: BorderRadius.circular(4),
color: Colors.grey.withOpacity(0.5),
child: InkWell(
borderRadius: BorderRadius.circular(4),
radius: 25,
onTap: ()=>Navigator.pop(context),
splashColor: Colors.grey,
highlightColor: Colors.grey,
child: Container(
width: 34,
height: 34,
child: Icon(
Icons.arrow_back,
color: Colours.colorPrimary,
size: 24,
),
),
))
it should work
I need to create a nav bar whose icons will look like this when active:
But mine looks like:
I usually use bottom_navy_bar.
So here is the code for it:
BottomNavyBarItem(
icon: _currentIndex == 0
? _buildActiveIcon(
'assets/icons/navigation/home_white_icon.png')
: _buildInactiveIcon("assets/icons/navigation/home_icon.png"),
activeColor: Colors.black,
inactiveColor: CustomColors.white,
title: Text(
"Home",
),
),
Code for active and inactive icon:
Widget _buildInactiveIcon(String assetUrl) {
return Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: CustomColors.white,
),
child: Center(
child: ImageIcon(
AssetImage(
assetUrl,
),
color: CustomColors.black,
),
),
);
}
Widget _buildActiveIcon(String assetUrl) {
return Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: Colors.black,
),
child: Center(
child: ImageIcon(
AssetImage(
assetUrl,
),
color: Colors.white,
),
),
);
}
So can this be done with the help pf any package or do I have to create some sort of custom navbar?
This is your solution:
Full page Screen Shot
BottomNavigationBarItem
BottomNavigatonBarItem Code:-
BottomNavigationBarItem(
icon: Container(
width: 140,
height: 35,
decoration: const BoxDecoration(
color: Color(0xffA3C2D4),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Stack(
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
const Center(
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"Notification",
style: TextStyle(color: Colors.black),
),
))
],
),
),
label: '',
),
Full Code:-
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: const Center(
child: Text(
"Screen 1",
style: TextStyle(fontSize: 28),
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
selectedItemColor: Colors.amber[800],
onTap: (v) {},
elevation: 0.0,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
width: 140,
height: 35,
decoration: const BoxDecoration(
color: Color(0xffA3C2D4),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Stack(
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
child: const Icon(
Icons.home,
color: Colors.white,
),
),
const Center(
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"Home",
style: TextStyle(color: Colors.black),
),
))
],
),
),
label: '',
),
BottomNavigationBarItem(
icon: Container(
width: 140,
height: 35,
decoration: const BoxDecoration(
color: Color(0xffA3C2D4),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Stack(
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
child: const Icon(
Icons.notifications,
color: Colors.white,
),
),
const Center(
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"Notification",
style: TextStyle(color: Colors.black),
),
))
],
),
),
label: '',
),
],
),
);
}
}
You can use persistent_bottom_nav_bar
Check also the package Salomon_bottom_navigation