I am giving an example when I click on the category group (fertilizer, medicine, etc.) that appears in the current picture, it will show 4 sub-categories, of course, it will be closed when I press it again. How can I do this in the most convenient way? Thank you everyone in advance
I am giving an example when I click on the category group (fertilizer, medicine, etc.) that appears in the current picture, it will show 4 sub-categories, of course, it will be closed when I press it again. How can I do this in the most convenient way? Thank you everyone in advance
Container(
alignment: Alignment.center,
padding: EdgeInsets.only(left: Dimensions.width10),
child: Flex(
direction: Axis.horizontal,
children: [Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
TextButton.icon(
onPressed: () {
setState(() {
_selectedPage = Page.el_makasi;
});
},
icon: Icon(
Icons.arrow_drop_down,
color:
_selectedPage == Page.el_makasi ? active : notActive,
),
label: const Text(
"Tohum",
style: TextStyle(color: AppColor.mainColor),
),
),
TextButton.icon(
onPressed: () {
setState(() {
_selectedPage = Page.gubre;
});
},
icon: Icon(
Icons.arrow_drop_down,
color: _selectedPage == Page.gubre ? active : notActive,
),
label: const Text("Gübre",
style: TextStyle(color: AppColor.mainColor)),
),
TextButton.icon(
onPressed: () {
setState(() {
_selectedPage = Page.ilac;
});
},
icon: Icon(
Icons.arrow_drop_down,
color: _selectedPage == Page.ilac ? active : notActive,
),
label: const Text("İlaç",
style: TextStyle(color: AppColor.mainColor)),
),
TextButton.icon(
onPressed: () {
setState(() {
_selectedPage = Page.tohum;
});
},
icon: Icon(
Icons.arrow_drop_down,
color: _selectedPage == Page.tohum ? active : notActive,
),
label: const Text("Makineler",
style: TextStyle(color: AppColor.mainColor)),
),
TextButton.icon(
onPressed: () {
setState(() {
_selectedPage = Page.makine;
});
},
icon: Icon(
Icons.arrow_drop_down,
color: _selectedPage == Page.makine ? active : notActive,
),
label: const Text("El makası",
style: TextStyle(color: AppColor.mainColor)),
),
],
),
),
),]
),
),
make a list within pages and select them with index in onPressed.
ExpansionTile is the best way to do this thing in an effective manner.
ExpansionTile(
title: Text("Ilac",
style: TextStyle(color:AppColor.mainColor)),
children: [
// here show 4 sub-categories, as pre UI design
Container(),
Container(),
],
),
Related
I want to put an information button that works just like an AlertDialog() but I'm having problems to put it next to the checkbox text since they're organized inside a Column() and I cannot just put a Row() inside of it.
Here is the code of the checkboxes:
Column (
// ...
RadioListTile(
title: Text('Pelagens de camundongos',
style: TextStyle(
fontSize: 17.0, color: Colors.white)),
value: 1,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_aa';
id = 1;
});
},
),
const SizedBox(
height: 5.0,
),
RadioListTile(
title: Text('Pelagem em cães labradores',
style: TextStyle(
fontSize: 17.0, color: Colors.white)),
value: 2,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_ee';
id = 2;
});
},
),
),
Inside of the title of your RadioListTile instead of putting a text widget you can put a row and inside of that row have Text and an IconButton that will pop up your alert dialog when pressed like this
Column(
children: [
RadioListTile(
title: Row(
children: [
Text('Pelagens de camundongos',
style: TextStyle(fontSize: 17.0, color: Colors.white)),
IconButton(
icon: Icon(
Icons.info_outline,
),
onPressed: () {
// code to pop up alert dialog
},
),
],
),
value: 1,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_aa';
id = 1;
});
},
),
const SizedBox(
height: 5.0,
),
RadioListTile(
title: Row(
children: [
Text('Pelagem em cães labradores',
style: TextStyle(fontSize: 17.0, color: Colors.white)),
IconButton(
icon: Icon(
Icons.info_outline,
),
onPressed: () {
// code to pop up alert dialog
},
),
],
),
value: 2,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_ee';
id = 2;
});
},
),
],
)
I'm trying to make a favorite button in my flutter app with Firebase. But when I use snapshot.hasData to see if the particular item is already present in favorite list, it always returns true, even if the item is not present in the database. So I tried snapshot.data.exists and it works. But, eventhough the app is working fine", it always shows following error in the debug console:
The getter 'exists' was called on null.
Receiver: null
Tried calling: exists
My Full code:
Widget build(BuildContext context) {
return StreamBuilder<DocumentSnapshot>(
stream: FirebaseFirestore.instance
.collection("UserData")
.doc(_auth.currentUser.uid)
.collection("Favourites")
.doc(widget.items["name"])
.snapshots(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
return Scaffold(
body: Row(
children: [
snapshot.data.exists
? Expanded(
child: TextButton.icon(
onPressed: () {
FirebaseFirestore.instance
.collection("UserData")
.doc(_auth.currentUser.uid)
.collection("Favourites")
.doc(widget.items["name"])
.delete();
},
label: Text(
"Unfavourite Item",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).accentColor),
),
icon: Icon(
Icons.star,
color: Theme.of(context).accentColor,
),
style: TextButton.styleFrom(
minimumSize: Size.fromHeight(50),
elevation: 0),
),
)
: Expanded(
child: TextButton.icon(
onPressed: () {
FirebaseFirestore.instance
.collection("UserData")
.doc(_auth.currentUser.uid)
.collection("Favourites")
.doc(widget.items["name"])
.set({
"name": widget.items["name"],
"image": widget.items["image"],
"price": widget.items["price"],
"locate": widget.items["locate"],
"assorted": true
});
},
label: Text(
"Favourite Item",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).accentColor),
),
icon: Icon(
Icons.star_border,
color: Theme.of(context).accentColor,
),
style: TextButton.styleFrom(
minimumSize: Size.fromHeight(50),
elevation: 0),
)),
],
),
);
}
);
}
Please help. I'm new to flutter and firebase.
Your snapshot is null at that time. So handle it like
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done){
return Scaffold(
body: Row(
children: [
snapshot.data.exists
? Expanded(
child: TextButton.icon(
onPressed: () {
FirebaseFirestore.instance
.collection("UserData")
.doc(_auth.currentUser.uid)
.collection("Favourites")
.doc(widget.items["name"])
.delete();
},
label: Text(
"Unfavourite Item",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).accentColor),
),
icon: Icon(
Icons.star,
color: Theme.of(context).accentColor,
),
style: TextButton.styleFrom(
minimumSize: Size.fromHeight(50), elevation: 0),
),
)
: Expanded(
child: TextButton.icon(
onPressed: () {
FirebaseFirestore.instance
.collection("UserData")
.doc(_auth.currentUser.uid)
.collection("Favourites")
.doc(widget.items["name"])
.set({
"name": widget.items["name"],
"image": widget.items["image"],
"price": widget.items["price"],
"locate": widget.items["locate"],
"assorted": true
});
},
label: Text(
"Favourite Item",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).accentColor),
),
icon: Icon(
Icons.star_border,
color: Theme.of(context).accentColor,
),
style: TextButton.styleFrom(
minimumSize: Size.fromHeight(50), elevation: 0),
)),
],
),
);
}else{
return SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: const Center(
child: CircularProgressIndicator(),
),
);
}
}
I'm using url_launcher: ^5.4.10 for launching different url scheme but is that external link is working fine on ios simulator but not working opening phone dialpad and default email address while its working fine on android devices
i tested it on ios simulator not real device
if i try to open dialpad here is exception
{PTS: 6.000 s, decode: 32.021 ms},
]
flutter: could not launch tel:+18002509646
when i try open email box here is exception i received
*** First throw call stack:
(
0 CoreFoundation 0x00000001084f4a2a __exceptionPreprocess + 242
1 libobjc.A.dylib 0x00000001083874ce objc_exception_throw + 48
2 Foundation 0x0000000107f2e808 -[__NSConcreteURLComponents initWithString:] + 0
3 CoreServices 0x000000010f7c2db2 -[_LSURLOverride initWithOriginalURL:checkingForAvailableApplications:] + 136
4 CoreServices 0x000000010f7c35b5 -[_LSURLOverride initWithOriginalURL:] + 22
5 CoreServices 0x000000010f7c3d97 _ZN14LaunchServices12URLOverridesL20getURLOverrideCommonEP5NSURL + 374
6 CoreServices 0x000000010f7c3c10 -[LSApplicationWorkspace(LSURLOverride) URLOverrideForURL:] + 12
7 UIKitCore <…>
my code url launcher
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';
class Contactcus extends StatelessWidget {
void customLaunch(command) async {
if (await canLaunch(command)) {
await launch(command);
} else {
print(' could not launch $command');
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10),
child: Container(
child: Column(
children: <Widget>[
Text(
'Contact us'.toUpperCase(),
style: TextStyle(
fontFamily: 'TT NORMS',
fontWeight: FontWeight.w100,
fontSize: 25,
),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Row(
children: <Widget>[
Expanded(
child: SizedBox(
child: ListTile(
leading: Icon(Icons.phone,
size: 25, color: Colors.black87),
onTap: () {
customLaunch('tel:+18001569647');
},
title: Text(
'Phone'.toUpperCase(),
style: TextStyle(
fontFamily: 'TT NORMS',
fontSize: 20,
fontWeight: FontWeight.w100,
),
),
subtitle: Text(
'1 (800) 250-9646 ',
style: TextStyle(
color: Colors.black87,
),
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Row(
children: <Widget>[
Expanded(
child: SizedBox(
child: ListTile(
leading: Icon(Icons.email,
size: 25, color: Colors.black87),
onTap: () {
customLaunch(
'mailto:livinghopetv#cornerstoneasianchurch.com?subject=Feed%20back&body=Write your%20feedback');
},
title: Text(
'Email',
style: TextStyle(
fontFamily: 'TT NORMS',
fontWeight: FontWeight.w100,
fontSize: 20
),
),
subtitle: Text(
'livinghopetv#cornerstoneasianchurch.com',
style: TextStyle(color: Colors.black87,
),
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Row(
children: <Widget>[
Expanded(
child: SizedBox(
child: ListTile(
leading: Icon(Icons.location_on,
size: 28, color: Colors.black87),
onTap:(){
customLaunch('https://www.google.ca/maps/place/3434+Cawthra+Rd,+Mississauga,+ON+L5A+2X7/#43.6025224,-79.6147441,17z/data=!3m1!4b1!4m5!3m4!1s0x882b470c94e668ff:0x62c956c363a795d9!8m2!3d43.6025185!4d-79.6125554');
},
title: Text(
'MAILING ADDRESS',
style: TextStyle(
fontFamily: 'TT NORMS',
fontWeight: FontWeight.w100,
fontSize: 20
),
),
subtitle: Text(
'Att: Living Hope TV\n'
'Cornerstone Asian Church\n'
'3434 Cawthra Rd\n'
'Mississauga, ON L5A 2X7\n'
'Canada',
style: TextStyle(
color: Colors.black87,
),
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 70),
child: Row(
mainAxisAlignment:MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Image.asset('images/youtube.png'),
iconSize: 30,
onPressed: () {
customLaunch('https://www.youtube.com/channel/UCsnohhaCJvkT3prNnMwlvnA');
},
),
IconButton(
icon: Image.asset('images/twitter.png'),
iconSize:30,
onPressed: () {
customLaunch('https://twitter.com/livinghopetv1');
},
),
IconButton(
icon: Image.asset('images/instagram.png'),
iconSize: 30,
onPressed: () {
customLaunch('https://www.instagram.com/livinghopetv/');
},
),
IconButton(
icon: Image.asset('images/facebook.png'),
iconSize: 30,
onPressed: () {
customLaunch('https://www.facebook.com/livinghopetelevision');
},
),
IconButton(
icon: Image.asset('images/web.png'),
iconSize: 30,
onPressed: () {
customLaunch('https://www.livinghopetv.org');
},
),
],
),
)
],
),
),
),
],
),
),
);
}
}
I have a suggestion to make, can you try giving the command like this:
Checks
1. Code Check
command = "tel://214324234"
// Also, try using Future in place of void
Future<void> customLaunch(command) async {
if (await canLaunch(command)) {
await launch(command);
} else {
print(' could not launch $command');
}
}
2. Formatting Check: Do check, if there is no space between tel: and the <phone number>, it has to be written without space, that is, tel:<phone_number>
3. Update Check: Also, there is a new update, that is, 5.5.0, please upgrade your packages accordingly in your pubspec.yaml file. Why, am I telling you cos, sometimes, previous version does not support some functionalities in your Mobile Platform
4. Real Device Check: Sometimes what happens is, the simulator does not support some functionalities. I would request you to please get a real iOS Device, and check it. If the above doesn't solve your issue, this might do the job
Add these lines to your myproject/ios/Runner/Info.plist file if you want to use external links.
<key>LSApplicationQueriesSchemes</key>
<array>
<string>http</string>
<string>https</string>
</array>
This work for me:
import 'dart:io' show Platform;
/// Dial
Future<void> contactDial(String number) async {
await _launchCaller(number);
}
_launchCaller(String number) async {
String url = Platform.isIOS ? 'tel://$number' : 'tel:$number';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
I have created buttons in grid view using flutter. Now I want to change color of button when I click on button. Same like active use in HTML. When I click on button then button should be show in active state and when I click on another button then first button will be disable and current button will be enable.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'My Mitsu',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
actions: <Widget>[
new RaisedButton(
child: new Text("Logout",
style: TextStyle(color: Colors.black, fontSize: 20.0)),
onPressed: () async {
log_out();
},
color: Colors.white,
)
],
),
backgroundColor: Colors.white,
body: Column(children: [
Expanded(
child: GridView.count(
crossAxisCount: countValue,
mainAxisSpacing: 35.0,
crossAxisSpacing: 35.0,
padding: const EdgeInsets.fromLTRB(20.0, 40.0, 40.0, 20.0),
childAspectRatio: (aspectWidth / aspectHeight),
children: <Widget>[
RaisedButton(
child: Text('Send Lift to Parking',
style: TextStyle(fontSize: 15.0)),
onPressed: () {
onPress(0);
showShortToast();
},
),
RaisedButton(
onPressed: () {
onPress(1);
showShortToast();
},
child: Text('Send Lift to 1st Floor',
style: TextStyle(fontSize: 15.0)),
),
RaisedButton(
onPressed: () {
onPress(2);
showShortToast();
},
child: Text('Send Lift to 2st Floor',
style: TextStyle(fontSize: 15.0)),
),
RaisedButton(
onPressed: () {
onPress(3);
showShortToast();
},
child: Text('Send Lift to 3st Floor',
style: TextStyle(fontSize: 15.0)),
),
RaisedButton(
onPressed: () {
onPress(4);
showShortToast();
},
child: Text('Send Lift to 4st Floor',
style: TextStyle(fontSize: 15.0)),
),
RaisedButton(
onPressed: () {
onPress(5);
showShortToast();
},
child: Text('Send Lift to 5st Floor',
style: TextStyle(fontSize: 15.0)),
),
RaisedButton(
onPressed: () {
onPress(6);
showShortToast();
},
child: Text('Send Lift to 6st Floor',
style: TextStyle(fontSize: 15.0)),
),
RaisedButton(
onPressed: () {
onPress(7);
showShortToast();
},
child: Text('Send Lift to 7st Floor',
style: TextStyle(fontSize: 15.0)),
),
],
),
),
]));
}
if you don't pass a function to the onPressed property of the button, the button will be automatically disabled,
(don't pass = passing null)
///button#1
FlatButton(
//change color according to state
color: button1Enabled? Colors.green:Colors.red;
onPressed: button1Enabled? (){ } : null;
)
///button#2
FlatButton(
onPressed: (){
setState(){
button1Enabled = !button1Enabled;
}
}
)
Create you button like this
RaisedButton(
onPressed: () {
onPressed(1);
},
color: currentIndex == 1 ? bottonColor : null,
child: Text('Send Lift to 1st Floor',
style: TextStyle(fontSize: 15.0)),
),
and create onPress fuction like this
onPressed(String floor) {
setState(() {
currentIndex = int.parse(floor);
bottonColor = Colors.red;
});
}
create two variable outside the class currentIndex and buttonColor
int currentIndex = 0;
Color bottonColor;
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
}
}
I am using FirebaseMessaging to push notifications on my app.
So I can handle these notification with this code :
firebaseMessaging.configure(
onLaunch: (Map<String, dynamic> msg) {
print("onLaunch called");
}, onResume: (Map<String, dynamic> msg) {
print("onResume called");
}, onMessage: (Map<String, dynamic> msg) {
print("onMessage called : " + msg.toString());
});
When I receive a notification, I want to display this little '1' on my icon in my appbar
My problem is : I don't know how to change my bell icon dynamically on my appbar for all pages (and I can't call setState in my appbar)
I think is pretty simple to solve your problem you only need to use a Stateful class and a custom icon as below snippet:
Widget myAppBarIcon(){
return Container(
width: 30,
height: 30,
child: Stack(
children: [
Icon(
Icons.notifications,
color: Colors.black,
size: 30,
),
Container(
width: 30,
height: 30,
alignment: Alignment.topRight,
margin: EdgeInsets.only(top: 5),
child: Container(
width: 15,
height: 15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xffc32c37),
border: Border.all(color: Colors.white, width: 1)),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Center(
child: Text(
_counter.toString(),
style: TextStyle(fontSize: 10),
),
),
),
),
),
],
),
);
}
and later you can include this icon on your app bar(leading or action). As you can see the Text value change with any touch I used as base the example code when you start a new Flutter project it contains a method to count how many times you touch the floating button and change the state:
void _incrementCounter() {
setState(() {
_counter++;
});
}
I hope this helps you
this is my example
Basic Idea behind the notification badge
Using Stack and Positioned widgets we can stack the Text widget over the
IconButton to show the notification badge.
appBar: AppBar(
leading: IconButton(
icon: Icon(
_backIcon(),
color: Colors.black,
),
alignment: Alignment.centerLeft,
tooltip: 'Back',
onPressed: () {
},
),
title: Text(
"Title",
style: TextStyle(
color: Colors.black,
),
),
backgroundColor: Colors.white,
actions: <Widget>[
IconButton(
tooltip: 'Search',
icon: const Icon(
Icons.search,
color: Colors.black,
),
onPressed: _toggle,
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new Container(
height: 150.0,
width: 30.0,
child: new GestureDetector(
onTap: () {
},
child: Stack(
children: <Widget>[
new IconButton(
icon: new Icon(
Icons.shopping_cart,
color: Colors.black,
),
onPressed: () {
}),
ItemCount == 0
? new Container()
: new Positioned(
child: new Stack(
children: <Widget>[
new Icon(Icons.brightness_1,
size: 20.0, color: Colors.orange.shade500),
new Positioned(
top: 4.0,
right: 5.0,
child: new Center(
child: new Text(
ItemCount.toString(),
style: new TextStyle(
color: Colors.white,
fontSize: 11.0,
fontWeight: FontWeight.w500),
),
)),
],
)),
],
),
),
),
)
],
),
You have to create a custom drawable and set it as the Appbar icon and you have to paint the number as text in the custom drawable. This is already done for you in the following link.
How to make an icon in the action bar with the number of notification?
you can just create variable of type IconData and change it's value. you will get more idea about that after gone through below example.
import 'package:flutter/material.dart';
void main() => runApp(MyHome());
class MyHome extends StatefulWidget {
#override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
IconData _iconData= Icons.notifications;
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Color(0xffFF5555),
),
home: Scaffold(
appBar: new AppBar(
title: new Text("Title"),
actions: <Widget>[
Icon(_iconData)
],
),
body: Center(
child: new Text("Demo")
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.check_circle_outline),
onPressed: (){
if(_iconData == Icons.notifications){
setState(() {
_iconData = Icons.notifications_active;
});
}else{
setState(() {
_iconData = Icons.notifications;
});
}
}
),
),
);
}
}