Column(
children: [
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: 3),
contentPadding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
//contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
leading: IconButton(
onPressed: (){},
icon:const Icon(Icons.location_on_outlined,size: 40,) ),
title: GestureDetector(
onTap: (){
},
child: const Text("PICK UP",style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.w500,
color:Color.fromARGB(255, 152, 182, 55)
),)
),
subtitle:const Text("Mysore,",style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black
),),
),
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: 3),
contentPadding: const EdgeInsets.symmetric(horizontal: 0.0, vertical:0),
leading: IconButton(
onPressed: (){},
icon:const Icon(Icons.location_on_outlined,size: 40,) ),
title: GestureDetector(
onTap: (){
},
child: const Text("DROP OFF",style: TextStyle(
fontSize: 19,
fontFamily: "Ubuntu",
fontWeight: FontWeight.w500,
color:Color.fromARGB(255, 152, 182, 55)
),)
),
subtitle:const Text("Bangalore,",style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black
),),
)
],
),
i added twlo list tile inside column but i dont ant space between two ListTile
You can wrap your listtile with sizedbox or use negative value in visual density
children: [
SizedBox(
height: 45,
child: ListTile(
leading: IconButton(
onPressed: () {},
icon: const Icon(
Icons.location_on_outlined,
size: 40,
)),
title: GestureDetector(
onTap: () {},
child: const Text(
"PICK UP",
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.w500,
color: Color.fromARGB(255, 152, 182, 55)),
)),
subtitle: const Text(
"Mysore,",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black),
),
),
),
SizedBox(
height: 45,
leading: IconButton(
onPressed: () {},
icon: const Icon(
Icons.location_on_outlined,
size: 40,
)),
title: GestureDetector(
onTap: () {},
child: const Text(
"DROP OFF",
style: TextStyle(
fontSize: 19,
fontFamily: "Ubuntu",
fontWeight: FontWeight.w500,
color: Color.fromARGB(255, 152, 182, 55)),
)),
subtitle: const Text(
"Bangalore,",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black),
),
))
],
);
or use negative value in visual density
Column(
children: [
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
leading: IconButton(
onPressed: () {},
icon: const Icon(
Icons.location_on_outlined,
size: 40,
)),
title: GestureDetector(
onTap: () {},
child: const Text(
"PICK UP",
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.w500,
color: Color.fromARGB(255, 152, 182, 55)),
)),
subtitle: const Text(
"Mysore,",
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w500, color: Colors.black),
),
),
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
leading: IconButton(
onPressed: () {},
icon: const Icon(
Icons.location_on_outlined,
size: 40,
)),
title: GestureDetector(
onTap: () {},
child: const Text(
"DROP OFF",
style: TextStyle(
fontSize: 19,
fontFamily: "Ubuntu",
fontWeight: FontWeight.w500,
color: Color.fromARGB(255, 152, 182, 55)),
)),
subtitle: const Text(
"Bangalore,",
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w500, color: Colors.black),
),
)
],
);
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 5),
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: -2),
contentPadding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 0),
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.location_on_outlined, size: 40,)),
title: GestureDetector(
onTap: () {},
child: const Text(
"DROP OFF",
style: TextStyle(
fontSize: 19,
// fontFamily: "Ubuntu",
// fontWeight: FontWeight.w500,
color: Color.fromARGB(255, 152, 182, 55)
),
)),
subtitle: const Text(
"Bangalore,",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black),
),tileColor: Colors.yellow,
dense: true,
),
ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: -2),
contentPadding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 0),
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.location_on_outlined, size: 40,)),
title: GestureDetector(
onTap: () {},
child: const Text(
"DROP OFF",
style: TextStyle(
fontSize: 19,
// fontFamily: "Ubuntu",
// fontWeight: FontWeight.w500,
color: Color.fromARGB(255, 152, 182, 55)
),
)),
subtitle: const Text(
"Bangalore,",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black),
),tileColor: Colors.yellow,
dense: true,
),
],
),
You can use contentPadding property to remove padding,
set this property to zero
Related
1-I am making a simple app where I am creating Profile section Where there is Stack at the top with two widgets
but the problem is when ever I test the app on different screen sizes the Stack item widgets are not at same position even i tried with MediaQuery
2-And the Second issue is I want the Circle Avatar to be place Half inside the Container And Half Out-side the Container.
Here is my Profile.dart class
class SettingsScreen extends StatelessWidget {
const SettingsScreen({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
// height: mediaQueryData.size.height * 0.4,
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(colors: [
Colors.black,
Color.fromRGBO(255, 243, 18, 3),
], begin: Alignment.topLeft, end: Alignment.bottomRight),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50))),
),
const Padding(
padding: EdgeInsets.only(top: 240, left: 140),
child: CircleAvatar(
backgroundColor: Color.fromARGB(183, 40, 46, 3),
radius: 50,
child: Text(
"M-E",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 32),
),
),
),
Positioned(
top: 110,
left: 40,
child: Text(
"مثابة ايلاف",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 70),
),
),
//),
],
),
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 0),
child: ListTile(
trailing: const Icon(
Icons.cast_for_education,
color: Colors.black,
),
title: const Text(
"Subjects (مضامین)",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
const Divider(
color: Colors.black,
thickness: 0.5,
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: ListTile(
trailing: const Icon(
Icons.contacts,
color: Colors.black,
),
title: const Text(
"Contact (رابطہ )",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
const Divider(
color: Colors.black,
thickness: 0.5,
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: ListTile(
trailing: const Icon(
Icons.settings,
color: Colors.black,
),
title: const Text(
"Setting (ترتیبات)",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
const Divider(
color: Colors.black,
thickness: 0.5,
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: ListTile(
trailing: const Icon(
Icons.logout,
color: Colors.black,
),
title: const Text(
"Logout (لاگ آوٹ)",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
],
),
],
),
));
}
}
Here is the const result I want when the app run on different devices
Here is the result I don't want to be happens whenever the device size changes
Use this structure.
Positioned(
top: 110,
left: 1,
right:1
child: Text(
"مثابة ايلاف",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 70),
),
),
I build a drawer as in the image using Flutter, but the elements of the drawer are showed in the left side and its not beautiful like this. I would like to show them in the center of the drawer or at least a little more to the right. Below you can find my code as a reference. It would be great if someone here can give a little help.
img
return Scaffold(
endDrawer: Drawer(backgroundColor: const Color(0xFF262533),
elevation: 10,
child: ListView(
children: [
PopupMenuButton(
tooltip: '',
child: Text(
'Escorts',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Agenturen & Clubs',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Escortagenturen',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Bordelle',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Laufhauser',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Saunaclubs',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Domina & BDSM-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Tantra & Massaage-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
]),
PopupMenuButton(
tooltip: '',
child: Text(
'Inserieren',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Werben',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Werbenformate',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Preise',
style:
TextStyle(color: Colors.white),
),
),
),
]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Blog',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Archiv',
style:
TextStyle(color: Colors.white),
),
),
),
]),
const Padding(
padding: EdgeInsets.all(10.0),
),
PopupMenuButton(
position: PopupMenuPosition.under,
tooltip: '',
child: const Text(
'Kontakt',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
],
),
),
replace ListView with Column widget
and inside Column make
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
code:
endDrawer: Drawer(
backgroundColor: const Color(0xFF262533),
elevation: 10,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//todo
]
))
you can align your element by use Container or Column in my case I build drawer like this
Drawer(
backgroundColor: black,
child: Column(
children: [
SizedBox(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: black,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: accent,
width: 0.5,
),
),
height: MediaQuery.of(context).size.width / 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logs.png",
height: 80,
width: 80,
),
const Text(
"Name App",
style: TextStyle(
color: grey,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
const Text(
"some body text",
style: TextStyle(
color: white,
fontSize: 14,
),
),
],
)),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView(
children: [
const Padding(
padding: EdgeInsets.only(right: 10),
child: Text(
"body text",
style: TextStyle(
color: white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 15),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
color: accent,
size: 20,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
const Divider(
endIndent: 10,
indent: 10,
color: grey,
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutPage()));
},
leading: const Icon(
Icons.info_outlined,
color: accent,
),
title: const Text(
"About App",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutMe()));
},
leading: const Icon(
Icons.engineering,
color: accent,
),
title: const Text(
"About",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8, right: 8),
child: const Text(
"Folow me Now !",
style: TextStyle(fontSize: 12, color: grey),
textAlign: TextAlign.center,
)),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: black,
),
margin: const EdgeInsets.all(10),
child: Row(
children: [
const Spacer(),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.facebook,
color: accent,
),
),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.instagram,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.whatsapp,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.telegram,
color: accent,
),
),
const Spacer(),
],
),
),
],
),
),
My code prints device characteristics. But if the text is too long, then the text is displayed ugly(as in the photo 1). I tried to fix it in different ways, but only title changes for me, trailing remains unchanged.
Can it be done in this way, if the text is long, then title is displayed in one line, and the next trailing (as in the photo 2)?
body: SingleChildScrollView(
child: Align(
alignment: Alignment.topCenter,
child: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Version of OS:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.version_OS} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
],
),
),
),
]
)
)
)
One option would be to remove trailing from ListTile and use RichText and TextSpan for title like so:
ListTile(
title: RichText(
text: TextSpan(
style: Theme.of(context).textTheme.headline6,
children: [
const TextSpan(
text: 'Version of OS: ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 25,
),
),
TextSpan(
text: '${device.version_OS}',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
),
),
],
),
),
),
Try below code hope its helpful to you.
Card(
child: ListTile(
leading: Text(
'Version of OS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
overflow:TextOverflow.ellipsis,
),),
title: Text('Your version with version 1.0'),
trailing: Text('Nokia'),
),
),
I am Making a PopUp menu inside Gesture Button but on clicking that button the menu does not show up. Nothing is happening on clicking the button. What should I do to make it visible on clicking the button?
I also used Focused Menu Button but the same happened with it as well. I cannot figure out the problem.
I am making a Screen like this:
I want to show these menus on clicking button:
My code for Screen is this:
import 'package:epicare/NavigBar.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:focused_menu/focused_menu.dart';
import 'package:focused_menu/modals.dart';
import 'AddMedicineScreen.dart';
class MedicinesRecord extends StatefulWidget {
#override
_MedicinesRecordState createState() => _MedicinesRecordState();
}
class _MedicinesRecordState extends State<MedicinesRecord>
with TickerProviderStateMixin {
TabController _tabController;
var _selectedIndex = 0;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this)
..addListener(() {
setState(() {
_selectedIndex = _tabController.index;
});
});
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: const Color(0xffE5E0A1),
elevation: 0,
centerTitle: true,
title: Text(
"Medicine",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Homepage();
},
),
);
},
),
),
body: Column(
children: [
// give the tab bar a height [can change height to preferred height]
Container(
margin: EdgeInsets.only(top: 32, right: 45, left: 45),
height: 45,
decoration: BoxDecoration(
color: const Color(0xffE5E0A1),
borderRadius: BorderRadius.circular(
17.0,
),
border: Border.all(width: 1.0, color: const Color(0xff2f363d)),
),
child: TabBar(
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
17.0,
),
color: Colors.black,
),
labelColor: const Color(0xffd4d411),
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child: Text(
'Medicines',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16,
//color: const Color(0xffd4d411),
letterSpacing: 0.48,
),
textAlign: TextAlign.left,
),
),
// second tab [you can add an icon using the icon property]
Tab(
child: Text(
'History',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16,
//color: const Color(0xffd4d411),
letterSpacing: 0.48,
),
textAlign: TextAlign.left,
),
),
],
),
),
// tab bar view her
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// Container(
//padding: EdgeInsets.symmetric(vertical: 25, horizontal: 32),
//height: 50,
//child:
Medicine(),
//),
// second tab bar view widget
MedHistory(),
],
),
),
],
),
floatingActionButton: _selectedIndex > 0
? Container()
: FloatingActionButton(
child: Icon(
Icons.add,
size: 40,
),
backgroundColor: const Color(0xffd4d411),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return AddMedicine();
},
),
);
},
),
);
}
Widget Medicine() {
Size size = MediaQuery.of(context).size;
return ListView(
children: [
Container(
margin: EdgeInsets.only(top: 25, left: 32, right: 32),
width: size.width * 0.80,
height: 54,
padding: EdgeInsets.symmetric(vertical: 11, horizontal: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: const Color(0x29000000),
offset: Offset(0, 3),
blurRadius: 6,
),
],
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Panadol',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
fontWeight: FontWeight.w500,
color: const Color(0xff232425),
),
textAlign: TextAlign.left,
),
Text(
'Thrice a day',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: const Color(0x80232425),
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.left,
),
],
),
Container(
width: size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'50 mg',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
fontWeight: FontWeight.w600,
color: const Color(0x80515559),
),
textAlign: TextAlign.left,
),
GestureDetector(
onTap: () {
myPopMenu();
// FocusedMenuHolder(
// menuBoxDecoration: BoxDecoration(
// color: const Color(0xFFD9D9D9),
// ),
// animateMenuItems: false,
// duration: Duration(milliseconds: 500),
// blurBackgroundColor: Colors.white,
// blurSize: 2,
// menuWidth: size.width * 0.5,
// onPressed: () {},
// menuItems: <FocusedMenuItem>[
// FocusedMenuItem(
// title: Text(
// "Edit",
// style: TextStyle(
// fontFamily: 'Montserrat',
// fontWeight: FontWeight.w600,
// fontSize: 14,
// color: const Color(0xff000000),
// ),
// textAlign: TextAlign.center,
// ),
// onPressed: () {}),
// FocusedMenuItem(
// title: Text(
// "Delete",
// style: TextStyle(
// fontFamily: 'Montserrat',
// fontWeight: FontWeight.w600,
// fontSize: 14,
// color: const Color(0xff000000),
// ),
// textAlign: TextAlign.center,
// ),
// onPressed: () {})
// ],
// );
},
child: Icon(
Icons.more_horiz,
size: 20,
),
)
],
),
),
],
),
),
],
);
}
Widget MedHistory() {
Size size = MediaQuery.of(context).size;
return ListView(
children: [
Container(
margin: EdgeInsets.only(top: 25, left: 32, right: 32),
width: size.width * 0.80,
height: 50,
padding: EdgeInsets.symmetric(vertical: 11, horizontal: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: const Color(0x29000000),
offset: Offset(0, 3),
blurRadius: 6,
),
],
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Panadol',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
fontWeight: FontWeight.w500,
color: const Color(0xff232425),
),
textAlign: TextAlign.left,
),
Text(
'From: 1 Jan,2021',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: const Color(0x80232425),
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.left,
),
],
),
Container(
width: size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'50 mg',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
fontWeight: FontWeight.w600,
color: const Color(0x80515559),
),
textAlign: TextAlign.left,
),
Text(
'Ongoing',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
fontWeight: FontWeight.w600,
color: const Color(0x80232425),
),
textAlign: TextAlign.left,
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 25, left: 32, right: 32),
width: size.width * 0.80,
height: 50,
padding: EdgeInsets.symmetric(vertical: 11, horizontal: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: const Color(0x29000000),
offset: Offset(0, 3),
blurRadius: 6,
),
],
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Calpol',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
fontWeight: FontWeight.w500,
color: const Color(0xff232425),
),
textAlign: TextAlign.left,
),
Text(
'As needed',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: const Color(0x80232425),
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.left,
),
],
),
Container(
width: size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'250 mg',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
fontWeight: FontWeight.w600,
color: const Color(0x80515559),
),
textAlign: TextAlign.left,
),
Text(
'Ended: 20 Jan, 2021',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
fontWeight: FontWeight.w600,
color: const Color(0x80232425),
),
textAlign: TextAlign.left,
),
],
),
),
],
),
),
],
);
}
Widget myPopMenu() {
return PopupMenuButton(
color: Colors.white,
onSelected: (value) {
Fluttertoast.showToast(
msg: "You have selected " + value.toString(),
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0);
},
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(2, 2, 8, 2),
child: Icon(Icons.print),
),
Text('Print')
],
)),
PopupMenuItem(
value: 2,
child: Row(
children: <Widget>[
Text(
"Edit",
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0xff000000),
),
textAlign: TextAlign.center,
),
],
),
),
PopupMenuItem(
value: 3,
child: Row(
children: <Widget>[
Text(
"Delete",
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0xff000000),
),
textAlign: TextAlign.center,
),
],
)),
]);
}
}
P.S: I am new to Flutter. Please help me out
Hello I only try to create circular button for each days of the week. For this I used Raisedbutton and CircleBorder shape, but when I have more than 4 raisedbutton, I have an overflowed, as if there was a padding hidden in the raisedbutton...
new Row (
children: <Widget>[
RaisedButton(
hoverElevation:5,
textColor: Colors.black,
color: Colors.white,
child: Text(("Lu"), style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600, fontSize: 15.0)),
onPressed: ()
{
},
shape: new CircleBorder(
)
),
RaisedButton(),
RaisedButton(),
RaisedButton(),
RaisedButton....
]
)
For one line you can use SingleChildScrollView widget for scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(children: <Widget>[
RaisedButton(
hoverElevation: 5,
textColor: Colors.black,
color: Colors.white,
child: Text(("Lu"),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 15.0)),
onPressed: () {},
shape: new CircleBorder()),
RaisedButton(
hoverElevation: 5,
textColor: Colors.black,
color: Colors.white,
child: Text(("Lu"),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 15.0)),
onPressed: () {},
shape: new CircleBorder()),
RaisedButton(),
RaisedButton(),
RaisedButton(),
RaisedButton(),
]),
)
or You just have to use Wrap widget for multi line
Wrap(
spacing: 2.0, // gap between adjacent chips
runSpacing: 2.0, // gap between lines
children: <Widget>[
RaisedButton(
hoverElevation: 5,
textColor: Colors.black,
color: Colors.white,
child: Text(("Lu"),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 15.0)),
onPressed: () {},
shape: new CircleBorder()),
RaisedButton(
hoverElevation: 5,
textColor: Colors.black,
color: Colors.white,
child: Text(("Lu"),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 15.0)),
onPressed: () {},
shape: new CircleBorder()),
RaisedButton(
hoverElevation: 5,
textColor: Colors.black,
color: Colors.white,
child: Text(("Lu"),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 15.0)),
onPressed: () {},
shape: new CircleBorder()),
RaisedButton(),
RaisedButton(),
RaisedButton(),
RaisedButton(),
])
I found this solution
I can custom the padding with this solution
new Row (
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Material(
borderRadius: BorderRadius.circular(30.0),
shadowColor: Colors.white,
child: InkWell
(
onTap:() { setState(() {
change=1;
swiper1(); }
);
},
child: Padding(
padding: const EdgeInsets.all(12.0),
child : Text(("Lu"), style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600, fontSize: 15.0)),
)
)
),
Material(
borderRadius: BorderRadius.circular(30.0),
shadowColor: Colors.white,
child: InkWell
(
onTap:() { setState(() {
change=2;
swiper1(); }
);
},
child: Padding(
padding: const EdgeInsets.all(12.0),
child : Text(("Ma"), style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600, fontSize: 15.0)),
)
)
),
....