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
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),
),
),
// ignore_for_file: sort_child_properties_last, prefer_const_constructors, prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
class StockPage extends StatelessWidget {
const StockPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
elevation: 0,
title: Text(
'PiyaSync',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
body: GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'STORE OF VALUE',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'SMART CONTRACTS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'DEFI',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'MEMES',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'CENTRALIZED EXCHANGE TOKENS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'NFTS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
],
),
);
}
}
/*ListView(
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'STORE OF VALUE',
style: TextStyle(
color: Colors.black,
fontSize: 17,
fontWeight: FontWeight.w900),
),
Text(
'SOFTWARE - INFRASTRUCTURE',
style: TextStyle(
color: Colors.black,
fontSize: 13,
fontWeight: FontWeight.w900),
)
],
),
)
],
)*/
/*Column(
children: <Widget>[
Expanded(
child: ListView(
children: [
Text(
'STORE OF VALUE',
style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold),
),
Expanded(
child: Container(
child: Text(
'BTC',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
),
color: Colors.green,
padding: EdgeInsets.only(left: 1),
margin: EdgeInsets.all(1),
),
),
],
),
),
],
),*/
/* Container(
width: 210, //360
height: 100, //230
color: Colors.green,
child: Align(
alignment: Alignment.center,
child: Text(
'ETH',
style: TextStyle(
height: -1,
fontWeight: FontWeight.w500,
fontSize: 25,
),
),
),
),*/
/*Padding(
padding: const EdgeInsets.only(right: 260),
child: Container(
height: 265,
color: Colors.white,
alignment: Alignment.topLeft,
child: Column(children: [
Text(
"STORE OF VALUE",
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
),
),
Container(
width: 210, //360
height: 130, //230
color: Colors.green,
child: Align(
alignment: Alignment.center,
child: Text(
'BTC',
style: TextStyle(
height: -1,
fontWeight: FontWeight.w500,
fontSize: 25,
),
),
),
),
Stack(
children: [
Positioned(
left: 20,
top: 20,
child: Container(
height: 200,
width: 200,
color: Colors.black,
child: Text('ETH'),
),
),
],
)
]),
),
),*/
You can use \n for new line and btc will be diaplayed below the other text
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'STORE OF VALUE\nBTC',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Image is here
Flutter app screen and text is appearing weird in Samsung S8 mobile
but tested in Other Samsung devises and its working fine, you can see how its supposed to work on the other devices on the above image
any one know why is this screen issue is happening only on samsung s8 ,only this image is here no log is getting so it is hard to resolve , is anyone faced this issue before,
minimumSdk is 21
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:splink/src/constants/app_colors.dart';
import 'package:splink/src/controllers/login_view_controllers.dart';
import 'package:splink/src/view/login_view/login_welcome_view.dart';
import 'package:splink/src/view/signup_view/signup_welcome_view.dart';
class LandingView extends StatefulWidget {
const LandingView({Key? key}) : super(key: key);
#override
State<LandingView> createState() => _LandingViewState();
}
class _LandingViewState extends State<LandingView> {
final signLoginController = Get.find<LoginViewController>();
final controller = PageController(
viewportFraction: 1,
keepPage: true,
);
List items = [
"assets/images/6D2Lmtv_X8A.png",
"assets/images/secondimage.png",
"assets/images/thirdImage.png"
];
List textItems = [
//first page of intro
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
"Find and play sports at",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
"anywhere, anytime",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
height: 25,
),
Text(
"splink helps you find, connect and organise activities",
style: TextStyle(
color: Colors.white,
),
),
Text(
"with other sports players easily at anywhere, anytime",
style: TextStyle(
color: Colors.white,
),
),
],
),
//second page of intro
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
"Organise and manage",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
"activties easily",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
height: 25,
),
Text(
"no more messy groups and missed activities.",
style: TextStyle(
color: Colors.white,
),
),
Text(
"Activity creation and RSVPs, calendar-tracking",
style: TextStyle(
color: Colors.white,
),
),
Text(
"or notifications, everything doe easily in-app",
style: TextStyle(
color: Colors.white,
),
),
],
),
//third page of intro
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
"Meet, play and endorse",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
"one another",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
height: 25,
),
Text(
"Have fun, encourage one another by exchanging medals,",
style: TextStyle(
color: Colors.white,
),
),
Text(
"track sports statistics and keep on playing!",
style: TextStyle(
color: Colors.white,
),
),
],
),
];
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
final pages = List.generate(
3,
(index) => Image.asset(
items[index],
fit: BoxFit.cover,
),
);
final pages2 = List.generate(3, (index) => textItems[index]);
return Scaffold(
backgroundColor: primaryColor,
body: Column(
children: [
Expanded(
child: ClipPath(
clipper: ClipPathClass(),
child: PageView.builder(
controller: controller,
padEnds: false,
// itemCount: pages.length,
itemBuilder: (_, index) {
return SizedBox(
height: size.height,
width: size.width,
child: pages[index % pages.length]);
},
onPageChanged: (value) {
signLoginController.curouselIndex(value % pages.length);
},
),
),
),
Expanded(
child: Container(
color: primaryColor,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: SmoothPageIndicator(
controller: controller,
count: 3,
effect: const ExpandingDotsEffect(
strokeWidth: 2.0,
dotColor: Colors.white,
activeDotColor: Colors.white,
dotHeight: 6,
dotWidth: 6,
),
),
),
const SizedBox(
height: 15,
),
Obx(
() => textItems[signLoginController.curouselIndex.value],
),
const SizedBox(
height: 70,
),
Padding(
padding: const EdgeInsets.only(right: 15, left: 15),
child: Material(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
child: InkWell(
onTap: () {
Get.to(SignupWelcomeView());
},
borderRadius: BorderRadius.circular(15),
child: Container(
width: size.width,
height: 50,
alignment: Alignment.center,
child: Text(
'Sign Up',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: primaryColor),
),
),
),
),
),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(right: 15, left: 15),
child: InkWell(
onTap: () {
Get.to(LoginWelcomeView());
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(color: Colors.white),
),
width: size.width,
height: 50,
alignment: Alignment.center,
child: const Text(
'Login',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
),
],
),
),
)
],
),
);
}
}
class ClipPathClass extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.addOval(Rect.fromCircle(
center: Offset(size.width * 0.5, -10),
radius: size.height - 20,
));
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
I mean, the "issue" is that the width/pixel density of the device is causing the text to overflow to the next line. You can either use a FittedBox, or tweak the fontSize to optimize it depending on the width (using MediaQuery or LayoutBuilder), both sould work.
You can also align the text on the center, instead of to the right, and I'd add some padding to ensure the text doesn't go right up to the screen border.
How do I auto scale down a font in a Text widget to fit the max number of lines?
I have created a mobile application and I was using a font family called Baloo Paaji 2 from google and I have faced an issue of extra spacing created between my 2 text widgets. Below you can see the image of the view.
The text I am talking about is the Welcome! Lakshya Jain. The space between the 2 is way too much. There is no SizedBox or Padding added to the text widget. I tried using 2 different methods to see if the method was the problem. The 2 different methods are shown below.
Method 1
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
Method 2
Text.rich(
TextSpan(
text: "Welcome !\n",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
children: [
TextSpan(
text: userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
),
Now I used another method which fixed this issue but created another one.
The Method 3 Screenshot is as follows.
Now the spacing issue is fixed but it created as the text has moved down a little. I want it to be center without the huge gap.
The code for this method is as followed.
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
The full code for the whole header is as followed
class HomeHeader extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Get User UID
final user = Provider.of<MyAppUser>(context);
return Stack(
clipBehavior: Clip.none,
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 15.0),
width: MediaQuery.of(context).size.width,
height: 230.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(255, 18, 54, 1.0),
Color.fromRGBO(255, 164, 29, 1.0),
],
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(59.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StreamBuilder(
stream: DatabaseService(uid: user.uid).userData,
builder: (context, snapshot) {
UserDataCustomer userData = snapshot.data;
return Row(
children: [
ClipOval(
child: CachedNetworkImage(
height: 70,
width: 70,
imageUrl: userData.profilePicture,
),
),
SizedBox(
width: 10.0,
),
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
// Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text(
// "Welcome !",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// ),
// Text(
// userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// Text.rich(
// TextSpan(
// text: "Welcome !\n",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// children: [
// TextSpan(
// text: userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// ),
],
);
},
),
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("Users Database")
.doc(user.uid)
.collection("Cart")
.snapshots(),
builder: (context, snapshot) {
int totalItems = 0;
if (snapshot.connectionState == ConnectionState.active) {
List documents = snapshot.data.docs;
totalItems = documents.length;
}
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen(),
),
);
},
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
10.0,
),
),
child: Center(
child: Text(
"$totalItems" ?? "0",
style: TextStyle(
fontSize: 20.0,
fontFamily: "BalooPaaji",
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
);
},
),
],
),
),
Positioned(
top: 200.0,
child: SearchBar(
width: MediaQuery.of(context).size.width * 0.83,
hintText: "Location",
),
),
],
);
}
}
Someone please help me and fix this issue as soon as possible.
I guess you are trying to reduce gap / padding between the 2 lines. If that is so, then the easiest way is to wrap them inside container and give it a fixed height. Check below.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20, // assign height as per your choice
child: Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
),
Container(
height: 26, // assign height as per your choice
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
NOTE: you can also give height inside the Text widget
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
height: 1.2, // assign height to fontSize ratio as per your choice
),
),
Try to change :
This : fontWeight: FontWeight.w600,
To : fontWeight: FontWeight.w500,
This is because I am trying to implement a bar a barcode reader to scan staff Id cards. so, all I want to achieve is when an agent assigned to scan the card performs a scan, it should display the scanned results in another page not the same screen or widget.
In simple terms just like you have todo list and when you click on a todo it will find the todo id and take you to a todo details page. That means a link to staff details page will be encoded into barcode so when you scan it would take you to the staff details page. But I don't know how to go about it.
This is what I have done below. This performs the scan quite ok but displaying the result is the problem.
import 'dart:async';
import 'package:erg_app/ScanPage.dart';
import 'package:erg_app/eops.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:erg_app/Animations/FadeAnimation.dart';
import 'package:flutter/services.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: StartScanPage(),
)
);
}
class StartScanPage extends StatefulWidget {
#override
StartScanPageState createState() {
return StartScanPageState();
}
}
class StartScanPageState extends State<StartScanPage> {
String result = "Bio Data:";
Future _scanQR() async {
try {
String qrResult = await BarcodeScanner.scan();
setState(() {
result = qrResult;
});
} on PlatformException catch (ex) {
if (ex.code == BarcodeScanner.CameraAccessDenied) {
setState(() {
result = "Camera permission was denied";
});
} else {
setState(() {
result = "Unknown Error $ex";
});
}
} on FormatException {
setState(() {
result = "You pressed the back button before scanning anything";
});
} catch (ex) {
setState(() {
result = "Unknown Error $ex";
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 50),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
FadeAnimation(1, Text("Verify Farmer",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30
),)),
SizedBox(height: 20,),
FadeAnimation(1.2, Text("Automatic identity verification which enables you to verify each farmer applicant",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.grey[700],
fontSize: 15
),)),
],
),
FadeAnimation(1.4, Container(
height: MediaQuery.of(context).size.height / 3,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/illustration1.png')
)
),
)),
Column(
children: <Widget>[
FadeAnimation(1.5, MaterialButton(
color: Colors.green,
minWidth: double.infinity,
height: 60,
onPressed: _scanQR,
// () {
// Navigator.push(context, MaterialPageRoute(builder: (context) => ScanPage()));
// },
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.green
),
borderRadius: BorderRadius.circular(50)
),
child: Text("Start Scan", style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 18
),),
)),
SizedBox(height: 20,),
FadeAnimation(1.6, Container(
// padding: EdgeInsets.only(top: 3, left: 3),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border(
bottom: BorderSide(color: Colors.green),
top: BorderSide(color: Colors.green),
left: BorderSide(color: Colors.green),
right: BorderSide(color: Colors.green),
)
),
child: MaterialButton(
minWidth: double.infinity,
height: 60,
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => EopPage()));
},
color: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
),
child: Text("Cancel", style: TextStyle(
// color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 18
), ),
),
))
],
)
],
),
),
),
);
}
}
I want to display the result here:
import 'package:flutter/material.dart';
import 'package:erg_app/CaptureInputsPage.dart';
void main() {
runApp(ProfilePage());
}
class ProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: new Center(child: Text('Farmers Data', textAlign: TextAlign.left)),
iconTheme: IconThemeData(color: Colors.white),
backgroundColor: Colors.green,
leading: IconButton(
icon: Icon(Icons.assignment_ind),
onPressed: () {},
),
),
body: Container(
child: ListView(
children: <Widget>[
Container(margin: EdgeInsets.only(top: 20),),
CircleAvatar(
radius: 80,
backgroundColor: Colors.grey,
),
Text(
'Yusuf Danladi',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 25,
),
textAlign: TextAlign.center,
),
Text(
'Welcome',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[400],
letterSpacing: 2.5,
),
textAlign: TextAlign.center,
),
Container(margin: EdgeInsets.only(top: 20),),
SizedBox(
height: 20.0,
width: 200,
child: Divider(
color: Colors.teal[100],
),
),
Text(
'Farmer Details',
textAlign: TextAlign.center,
),
Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Text(
'Phone:',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[700],
letterSpacing: 2.5,
),
),
title: Text(
'+234 801 000 4504',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
),
),
Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Text(
'BVN:',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[700],
letterSpacing: 2.5,
),
),
title: Text(
'22108691911',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
),
),
Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Text(
'Appicant ID:',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[700],
letterSpacing: 2.5,
),
),
title: Text(
'ERG-108691911',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
),
),
Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Text(
'State/LGA:',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[700],
letterSpacing: 2.5,
),
),
title: Text(
'Taraba/Ussa',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
),
),
Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Text(
'Farm Size:',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[700],
letterSpacing: 2.5,
),
),
title: Text(
'5000 meter sq',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
),
),
Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Text(
'Geo Coord.:',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.green[700],
letterSpacing: 2.5,
),
),
title: Text(
'012350007, 038245543',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
),
),
Container(
margin: EdgeInsets.only(top: 20, bottom: 30),
child: Center(
child: RaisedButton(
padding: EdgeInsets.fromLTRB(80, 10, 80, 10),
color: Colors.green,
child: Text("Complete", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14), ),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => CaptureInputsPage()));
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
),
),
],
),
),
),
);
}
}
After getting the result from qrcode, you can simply use MaterialPageRoute.
Future _scanQR() async {
try {
String qrResult = await BarcodeScanner.scan();
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ProfilePage(qrResult),
),
);
} on PlatformException catch (ex) {
....
}
}
Create ProfilePage as
class ProfilePage extends StatelessWidget {
final String result;
ProfilePage(this.result);
....
}