I've got an issue with the button on the right... The round green one has some kind of vertical margin (in yellow) and I don't know how to get rid of it and its making me crazy !
I would like it to be like the RaisedButton on the left.
This is the code that creates this :
Widget myWidget() {
return Row (
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
color: Colors.red,
child:
RaisedButton(
color: Colors.red,
onPressed: () {},
child: Container(child: Text("+")),
)),
Container(
color: Colors.yellow,
child:ClipOval(
child: Container(
child:InkWell(
onTap: () {
setState((){
});
},
child: myButton("+")
)
)
),
),
And the myButton widget :
Widget myButton(text) {
return new Container(
margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 0, bottom: 0), //horizontal margin works but vertical margin is not impacted by whatever I put here
padding: EdgeInsets.all(20),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
child: new Text(text,
style: new TextStyle(
color: Colors.white,
fontSize:
50.0)),
);
}
The parent widget :
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
Align(...),
Align(...)
]
),
Expanded(
child: Card(
child: InputControlParent(),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
myWidget() #<= child presented above
],
)
],
);
Parent code.
Widget myWidget() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.red,
child: RaisedButton(
color: Colors.red,
onPressed: () {},
child: Container(child: Text("+")),
)),
Container(
height: 100,//i put height
width: 100,// i put weidth
color: Colors.yellow,
child: InkWell(
onTap: () {
setState(() {});
},
child: myButton("+")),
),
])
myButton widget :
Widget myButton(text) {//remove the margin that not needed
return new Container(
padding: EdgeInsets.all(20),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green,
),
child: Center(
child: new Text(text,
style: new TextStyle(color: Colors.white, fontSize: 50.0)),
),
);
}
Related
Consider this UI:
Code:
Widget shopHeader(var shopName, var shopAddress){
return Container(
height: 200,
margin: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.all(1.0),
child: const Icon(Icons.home, color: Colors.black),
decoration: const BoxDecoration(
color: Colors.grey, // border color
shape: BoxShape.circle,
),
),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
shopName,
style: TextStyle(fontSize: 17),
),
Text(
shopAddress,
style: TextStyle(fontSize: 14, color:Colors.black38),
),
Padding(
padding: EdgeInsets.only(left:0.0, right:0.0, top:20.0, bottom:0.0),
child: SizedBox(
width: 150,
child: ElevatedButton(
child: Text('Chat'),
onPressed: () {},
))
)
],
),
],
),
);
}
The icon on the left is too low. How to set it so it's align with "Awesome Shop" text?
On the topmost Row widget use the crossAxisAllignment property to CrossAxisAllignment.start.
I am trying to use the showBottomModalPopup but I can't seem to get it extended more than 50 % of the screen even tho I am using the the context of the screen to set the height.
Can anyone please spot what I am doing wrong
I am trying to set it to 80%
This the showBottomModal function
void _tripShowModalBottomSheet(context) {
showModalBottomSheet(context: context, builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(context).size.height * .80,
color: Colors.white,
child: Text('this is your first showBottomModal')
);
});
}
I am calling it from here
onLongPress: () => {
_tripShowModalBottomSheet(context)
},
full code if needed
import 'package:flutter/material.dart';
class TransportMenuBody extends StatelessWidget {
const TransportMenuBody({Key key}) : super(key: key);
void _tripShowModalBottomSheet(context) {
showModalBottomSheet(context: context, builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(context).size.height * 30,
color: Colors.white,
child: Text('this is your first showBottomModal')
);
});
}
#override
Widget build(BuildContext context) {
return
ListView(children: <Widget>[
Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
alignment: Alignment.topLeft,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(bottom: 10.0),
child: Text('Kigali', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400, color: Colors.black),),
),
InkWell(
onLongPress: () => {
_tripShowModalBottomSheet(context) // calling the function from here
},
onTap: () => {},
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width * 1,
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
child: Container(
child: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(child: Text('201', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.w600))),
Container(
alignment: Alignment.topLeft,
child: Text('20 active buses', style: TextStyle(color: Color(0xFFd9d9d9)),),),
],),
Row(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Text('Kicukiro(saint-joseph) - Down town'),),
],),
const Divider(
color: Color(0xFFD9D9D9),
thickness: .5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(child: Text('201', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.w600))),
Container(
alignment: Alignment.topLeft,
child: Text('20 active buses', style: TextStyle(color: Color(0xFFd9d9d9)),),),
],),
Row(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Text('Kicukiro(saint-joseph) - Down town'),),
],),
const Divider(
color: Color(0xFFD9D9D9),
thickness: .5,
),
],)
)
)
),
),
],
)
),
Text('data'),
],
);
}
}
Well I am not sure if bottomSheetModal can gain height but if you want a bottom sheet with rich customization you can also use DraggableScrollableSheet which is scrollable by default with nice animation DraggableScrollableSheet you can check this here https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html
i have three buttons in my login page each of them are a different type of login options when i type in bigger texts in one button that itself is changing how can i keep everything constant.can someone look into it please.
Here's my code:
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(size: 150),
SizedBox(height: 50),
_signInButton(),
_signInFbButton()
],
),
),
),
);
}
Widget _signInButton() {
return Container(
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/google_logo.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
}
Widget _signInFbButton() {
return Container(
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/facebook-logo.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
here's the screen shot of how many buttons are arranged i want to have all the buttons constant and texts inside it formatted properly:
You don't need the column I think. So, I removed that. Here is the way you can create custom button with size. Feel free to change minWidth to get the best result.
new: Please consider using Flexible and Expanded inside the row. If the button text goes in multi-line please reduce the font size to fix it.
Widget _signInButton() {
return ButtonTheme(
minWidth: 400.0,
padding: EdgeInsets.all(10),
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {},
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Image.network(
'https://picsum.photos/250?image=9',
height: 35,
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Text('Sign in with Facebook',
style: TextStyle(
fontSize: 20, color: Colors.grey))),
)
])
),
);
}
i'm using two buttons in my application which is been used inside a method separately.but i'm not able to given enough space between those two buttons,can someone look into it please.
here's my code:
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(size: 150),
SizedBox(height: 50),
_signInButton(),
_signInFbButton()
],
),
),
),
);
}
Widget _signInButton() {
return Container(
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/google_logo.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
}
Widget _signInFbButton() {
return Container(
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/facebook-logo.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
Here's my screenshot of what im trying to do i'm creating a sign in page using google sign-in and facebook sign-in
Why don't you try what you have already? the SizedBox to achieve that,
_signInButton(),
SizedBox(height: 16),//<----
_signInFbButton()
You can wrap _signInFbButton() widget with Padding and provide top padding per your requirement. Working code below:
_signInButton(),
Padding(
padding: EdgeInsets.only(top: 5),
child: _signInFbButton())
Hope this answers your question.
the Row in my container contains padding on the left(I think). I want to align with the other children in the Column. I've been playing around with padding for the last two hours and find out how to eliminate the padding...
The sign in should align vertically from the left with buttons above it
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/img/signin.png'),
fit: BoxFit.cover,
),
),
),
Container(
padding: EdgeInsets.only(top: 100),
child: Opacity(
opacity: _showProgressIndicator ? 1 : 0,
child: CircularProgressIndicator(),
),
),
Container(
// height: MediaQuery.of(context).size.height - 180,
padding:
EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 60),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.up,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new FlatButton(
padding: EdgeInsets.zero,
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
Navigator.push(
context, SignInPage(widget.onSignedIn));
},
),
Opacity(
opacity: _showMessage ? 1 : 0,
child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
new FlatButton(
padding: new EdgeInsets.all(0.0),
child: new Text(
'SIGN UP WITH EMAIL',
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
Navigator.push(
context, SignUpPage(widget.onSignedIn));
},
),
]),
new Container(
// padding: EdgeInsets.all(10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new RaisedButton(
color: Colors.blue[800],
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4))),
child: new Text('CONNECT WITH FACEBOOK',
style: new TextStyle(
fontSize: 16,
letterSpacing: 0.5,
color: Colors.white)),
onPressed: loginWithFb,
),
new SizedBox(height: 20),
new RaisedButton(
color: Colors.red,
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4))),
child: new Text('CONNECT WITH GOOGLE',
style: new TextStyle(
fontSize: 16,
letterSpacing: 0.5,
color: Colors.white)),
onPressed: loginWithGoogle,
),
],
),
),
],
),
))
],
),
),
);
}
I could fix this by changing the default ButtonTheme if I understand correctly what you mean, because you said:
The sign in should align vertically from the left with buttons above it
Don't you mean horizontally from the left, if that is the case try this:
Wrap the Flatbutton in a Theme with ThemeData and a new ButtonTheme, then change the padding and minWidth with your own(when I only changed the padding or width it didn't work).
This removes the default from the ButtonTheme
Example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Theme(
data: ThemeData(buttonTheme: ButtonThemeData(minWidth: 20.0,padding: EdgeInsets.all(0.0))),
child: new FlatButton(
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
},
),
),
Opacity(
opacity: true ? 1 : 0,
child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
new FlatButton(
padding: new EdgeInsets.all(0.0),
child: new Text(
"SIGN UP WITH EMAIL ",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
},
),
]),
Result: