I'm new to flutter.
I am integrating google and facebook sign in to single page.I've set google sign in btn in container. Plz let me know where can I put fb login button with login-logout condition in same container. here's my code.
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
body: Container(
child: _isLoggedIn
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(_googleSignIn.currentUser.photoUrl, height: 50.0, width: 50.0,),
Text(_googleSignIn.currentUser.displayName),
OutlineButton( child: Text("Logout"), onPressed: (){
_logout();
},)
],
)
: Center(
child: OutlineButton(
child: Text("Login with Google"),
onPressed: () {
_login();
},
),
) ,
),
),
);
}
Center(
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children:[
OutlineButton(
child: Text("Login with Google"),
onPressed: () {
_login();
},
),
OutlineButton(
child: Text("Login with Facebook"),
onPressed: () {
//Todo
},
),
) ,
Related
I'm new on flutter and I don't have an idea why ElevatedButton stretched and become a background. I just want a simple button. How can I solve this problem? Here's the image below:
Here's my code
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: SafeArea(
child: Center(
child: Column(
children: [
Image.asset(
'profile_image.jpg', height: 150, width: 150,),
const SizedBox(height: 15,),
Text("Hello World"),
const SizedBox(height: 15,),
const Text('Go back'),
],
)
)
),
),
)
);
}
}
You are using button on body. that's why full body acting as button.
body: Center(
child: ElevatedButton(
What you seek is just wrapping the Text('Go back')), with ElevatedButton.
return Scaffold(
body: Center(
child: SafeArea(
child: Center(
child: Column(
children: [
Image.asset(
'profile_image.jpg',
height: 150,
width: 150,
),
const SizedBox(
height: 15,
),
Text("Hello World"),
const SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () {
// Navigator.pop(context);
},
child: const Text('Go back')),
],
))),
));
I am new to flutter and I want to open google maps by clicking on button using flutter.
Here is my code and in that code on line no 98 I want to open google maps by clicking on share your location button so please give me a suggestion that which dependencies I should use to do so (google-maps-flutter or google-urls) and what changes I should make in my code.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'maps.dart';
class Intro extends StatefulWidget {
const Intro({Key? key}) : super(key: key);
#override
_IntroState createState() => _IntroState();
}
class _IntroState extends State<Intro> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('\t\t\t\t\t\t\t\t\t\tShree Food'),backgroundColor: Color(0xff01A0C7)),
body: Column(
children:[
Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text('Goal'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('>'),
onPressed: () {
showAlertDialog(context);
},
),
const SizedBox(width: 8),
],
),
],
),
),
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text('Vision'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('>'),
onPressed: () {
showAlertDialog1(context);
},
),
const SizedBox(width: 8),
],
),
],
),
),
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
GridView.count(
primary: false,
padding: EdgeInsets.all(50),
shrinkWrap: true,
crossAxisCount: 2,
children: [
Column(
children : [
IconButton(
icon: Image.asset(
'images/maps.png',
),
iconSize: 80,
onPressed: () {
**//I want to open google maps by clicking on this button**
},
),
Text('Share Your Location')
],
),
Column(
children : [
IconButton(
icon: Image.asset(
'images/donate.jpg',
),
iconSize: 80,
onPressed: () {
},
),
Text('Donate Zone')
],
),
],
),
],
),
)
]
)
);
}
}
showAlertDialog(BuildContext context) {
// Create button
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => Intro()));
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Simple Alert"),
content: Text("This is an alert message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
showAlertDialog1(BuildContext context) {
// Create button
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => Intro()));
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Simple Alert"),
content: Text("This is an alert message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
if I understood your question , you want to open google maps when pressing on a button , if this is the case you need to use this package :
map_launcher
give it a try
Is there any way to change the text labels of the Continue and Cancel Buttons of the stepper in flutter? Stepper seems to be the perfect choice for what I want to do (long form with several "stages") and before I go try to build one from scratch just to get other labels for the buttons I thought I may ask..
Anybody knows if/how thats possible?
Yes, you can by providing a controlsBuilder callback. Which has to be a function that takes two other functions (onStepContinue and onStepCancel) which are the actions that you will have to pass to the new buttons you'll create in order for them to act as they should.
Then you can declare anything you want (in this case a row with two buttons) as long you pass the two functions (onStepContinue and onStepCancel) for them to work as its expected:
Stepper(
controlsBuilder: (BuildContext context,
{VoidCallback? onStepContinue, VoidCallback? onStepCancel}) {
return Row(
children: <Widget>[
TextButton(
onPressed: onStepContinue,
child: const Text('NEXT'),
),
TextButton(
onPressed: onStepCancel,
child: const Text('EXIT'),
),
],
);
},
steps: const <Step>[
Step(
title: Text('A'),
content: SizedBox(
width: 100.0,
height: 100.0,
),
),
Step(
title: Text('B'),
content: SizedBox(
width: 100.0,
height: 100.0,
),
),
],
);
flutter version 2.8.1
inside the Stepper you can use controlsBuilder
you can change buttons
controlsBuilder: (context,_) {
return Row(
children: <Widget>[
TextButton(
onPressed: (){},
child: const Text('NEXT'),
),
TextButton(
onPressed: (){},
child: const Text('EXIT'),
),
],
);
},
controlsBuilder: (BuildContext context, ControlsDetails details) {
final _isLastStep = _currentStep == _getSteps.length - 1;
return Container(
margin: const EdgeInsets.only(top: 50),
child: Row(children: [
Expanded(
child: ElevatedButton(
child: Text(_isLastStep ? 'Send' : 'Next'),
onPressed: details.onStepContinue)),
const SizedBox(
width: 12,
),
if (_currentStep != 0)
Expanded(
child: ElevatedButton(
child: Text('Back'),
onPressed: details.onStepCancel))
]));
},
I m late for the discussion.
But i have just done it and think it is good to share.
The code is able to control the Text for each step as the code below.
Each step will have difference text, manage to do for 3 steps. If more than that, the code will be quite messy.
Hope it helps someone who is looking for it.
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
_activeCurrentStep == 0
? TextButton(
onPressed: onStepContinue,
child: const Text('NEXT'),
)
: _activeCurrentStep == 1
? Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: onStepContinue,
child: const Text('NEXT'),
),
TextButton(
onPressed: onStepCancel,
child: const Text('BACK'),
),
],
),
)
: _activeCurrentStep >= 2
? Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: onStepContinue,
child: const Text('SAVE'),
),
TextButton(
onPressed: onStepCancel,
child: const Text('BACK'),
),
],
),
)
: TextButton(
onPressed: onStepCancel,
child: const Text('BACK'),
),
],
);
},
Solution for flutter version > 2.8.1
In flutter version > 2.8.1 you can not use this for change the labels or buttons:
controlsBuilder: (context, {onStepContinue, onStepCancel}) {...}
Use this:
controlsBuilder: (context, _) {...}
Or this:
controlsBuilder: (context, onStepContinue) {...}
controlsBuilder: (context, onStepCancel) {...}
This is a complete example changing the labels text and colors:
Stepper(
controlsBuilder: (context, _) {
return Row(
children: <Widget>[
TextButton(
onPressed: () {},
child: const Text(
'NEXT',
style:
TextStyle(color: Colors.blue),
),
),
TextButton(
onPressed: () {},
child: const Text(
'EXIT',
style:
TextStyle(color: Colors.blue),
),
),
],
);
},
//Rest of the Stepper code (currentStep, onStepCancel, onStepContinue, steps...)
//...
)
I am trying to have a grouped button with two individuals and place them in the bottom. It is a login screen so there are other things.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 75.0,
),
Text('Login'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.orange,
onPressed: () {
print('login');
},
),
RaisedButton(
onPressed: () {
print('signup');
},
),
],
),
],
),
),
),
);
}
}
I've been trying with like align bottom and stuffs. But with Row(), it does not work with Center + Column widget. How can I send these two buttons to the bottom of the Center widget?
There are multiple ways to do this. One of them is to use the Spacer widget:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 75.0,
),
Spacer(),
Text('Login'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.orange,
onPressed: () {
print('login');
},
),
RaisedButton(
onPressed: () {
print('signup');
},
),
],
),
],
),
),
),
);
Another one would be to reverse the column and start from the bottom, but most probably the side effects are not wanted.
Also, one option would be to divide the whole screen into fixed height partitions with the help of MediaQuery.of(context).size.height value so that your buttons are always at the bottom.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 75.0,
),
Text('Login'),
Expanded(
child:Container
(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.orange,
onPressed: () {
print('login');
},
),
RaisedButton(
onPressed: () {
print('signup');
},
),
],
),
)
)
],
),
),
),
);
}
I'm trying to make widgets behind a PageView clickable by wrapping it around a GestureDetector, but it doesn't work.
Is there another way I can do this?
My code:
new GestureDetector(
behavior: HitTestBehavior.translucent,
child: new PageView(
controller: _pageController,
children: _buildForegroundPages(),
),
),
What you need is to wrap each page inside your PageView in a GestureDetector, like this.
PageView(
children: [
//Page1
GestureDetector(
onTap: () {
print("Click page1");
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => NewPage()
));
},
child: Container(
color: Colors.red,
child: Center(
child: Text("text 1"),
),
),
),
//Page2
GestureDetector(
onTap: () {
print("Click page2");
},
child: Container(
color: Colors.blue,
child: Center(
child: Text("text 1"),
),
)),
//Page3
GestureDetector(
onTap: () {
print("Click page3");
},
child: Container(
color: Colors.green,
child: Center(
child: Text("text 1"),
),
)),
],
);