I am trying to align the icon to the very left edge of the blue container.
The red container is just there for reference (I am using ScreenUtil).
How can I align the icon perfectly to the left edge of the blue container? So that there is no gap, not even one pixel? In this snippet I used FaIcons, however I have the same problem with the standard material icons.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
left: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50.w,
color: Colors.blue,
margin: EdgeInsets.only(left: 35.w),
child: IconButton(
iconSize: 25.w,
onPressed: () {},
icon: const FaIcon(FontAwesomeIcons.bars),
),
),
Container(
margin: EdgeInsets.only(left: 35.w),
color: Colors.red,
width: 20.w,
height: 20.w,
)
],
),
),
);}}
remove the padding from iconbutton and set constraints.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
left: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
color: Colors.blue,
margin: EdgeInsets.only(left: 35),
padding: EdgeInsets.zero,
alignment: Alignment.centerLeft,
child: IconButton(
iconSize: 25,
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: const Icon(Icons.person,),
),
),
Container(
margin: EdgeInsets.only(left: 35),
color: Colors.red,
width: 20,
height: 20,
)
],
),
),
);
}
I think it's fine
Container(
width: 50.w,
color: Colors.blue,
padding: EdgeInsets.zero,
margin: EdgeInsets.only(left: 35.w),
child: IconButton(
iconSize: 25.w,
alignment: Alignment.centerLeft,
padding: EdgeInsets.zero,
onPressed: () {},
icon: Icon(Icons.menu),
),
),
Related
I wrote a page, at the top everything is fine, as it should be. And at the bottom I have a history of events. The width of my container is determined automatically (depending on the width of the screen), and the height - no, on different devices different heights (indents at the bottom are different). Is it possible to determine the height automatically (to the end of the screen) ?? Also, I'd like to add a scroll bar at the bottom for this container so that when events appear there, I can scroll through them both bottom and top. I will be grateful for your help.
My page:
My code:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color:Colors.white12
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom:40, left:0, right:0),
),
Center(
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: 430,
decoration: BoxDecoration(
border: Border.all(
width: 1.5
),
borderRadius: BorderRadius.circular(25)
),
child: new Column(
children: [
Container(
child: Text("history events", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)
),
],
),
)//Container
)
]
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
My scrin (after updating the code)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0, color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0),
),
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(7, 0, 7, 7),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all(width: 1.5), borderRadius: BorderRadius.circular(25)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 45,
child: Text("history events", style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
Expanded(
child: Scrollbar(
child: new ListView(
shrinkWrap: true,
children: [
Container(
child: Text("Event 1", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 2", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 3", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 50,
),
],
))),
],
))))
]),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
// _scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
You can alter the responsive height or width by using Media Query .To do that you need to wrap your Scaffold with Material App or Cupetino App which allows you to use MediaQuery .
void main() {
runApp(MaterialApp(home: MyApp()));
}
To make the list scrollable simply you can use ListView.builder
Center(
child: Container(
margin: new EdgeInsets.only(bottom: 20,right: 15,left: 15),
alignment: Alignment.center,
width: double.infinity,
height: MediaQuery.of(context).size.height/1.5,
decoration: BoxDecoration(
border: Border.all(width: 1.5),
borderRadius: BorderRadius.circular(25)),
child: new Column(
children: [
Container(
child: Text("history events",
style: TextStyle(
fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
],
),
) //Container
)
I added a little margin to make it looks better.Ofcourse you can also use MediaQuery for margin or padding if you want to.
https://i.stack.imgur.com/W6oXd.png
This is the UI I want to implement, I only started playing with flutter last week so I am not as fluent. I was wondering what is the best way to achieve this layout.
This is what I get with a stack and column:
This is the code:
Column(
children: <Widget>[
Expanded(
child: Container(
constraints: BoxConstraints.expand(height: 150),
color: Colors.blue,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
bottom: -40,
left: MediaQuery.of(context).size.width * 0.4,
// alignment: Alignment.bottomCenter,
child: Container(
constraints: BoxConstraints.expand(height: 80, width: 80),
color: Colors.green,
),
),
],
),
),
flex: 3,
),
Expanded(
child: Container(
margin: EdgeInsets.all(15.0),
color: Colors.red,
),
flex: 7,
)
],
);
I made something like the image you provided with dummy image and some icon you can change icons if you want,use media query size instead of fixed padding tops
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Stack(children: [
Container(
child: FittedBox(
fit: BoxFit.fill,
child: Image.network('https://picsum.photos/300?image=10')),
height: 150,
width: double.infinity,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Padding(
padding: const EdgeInsets.only(top: 75),
child: MaterialButton(
onPressed: () {},
elevation: 2.0,
color: Colors.red,
child: Icon(
Icons.message,
size: 27.0,
),
padding: EdgeInsets.all(20),
shape: CircleBorder(),
),
),
Padding(
padding: const EdgeInsets.only(top: 75),
child: Column(children: [
CircleAvatar(
radius: 55.0,
backgroundImage:
NetworkImage('https://i.pravatar.cc/150?img=54'),
backgroundColor: Colors.transparent,
),
Text("David Beckham"),
Text("Model/SuperStar")
]),
),
Padding(
padding: const EdgeInsets.only(top: 75),
child: MaterialButton(
onPressed: () {},
elevation: 2.0,
color: Colors.blue,
child: Icon(
Icons.add,
size: 27.0,
),
padding: EdgeInsets.all(20),
shape: CircleBorder(),
),
),
],
),
]),
Container(height: 100, color: Colors.red),
Container(height: 100, color: Colors.green),
Container(height: 100, color: Colors.yellow),
Container(height: 100, color: Colors.blue),
],
)));
}
}
I did a Gridview.count for rendering 6 buttons in 2 columns and 3 rows, it's not rendering and instead of the components, it shows yellow and black stripes. I already set the height and the width, all wrapped in a container.
return Scaffold(
body: Container(
height: 450.0,
width: double.infinity,
child: GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Wifi')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
],
)));
}
}
Please, someone knows why it's not rendering properly? or have an alternative widget that might work better? Thanks.
This widget is imported in this one:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF88B4E0),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Help and FAQ',
style: TextStyle(fontSize: 18.0, color: Colors.white)),
centerTitle: true,
actions: <Widget>[
SearchButton(),
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Positioned(
top: 75.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
SizedBox(height: 20.0),
Testing(),
],
),
)),
]),
]),
);
}
void moveBack() {
Navigator.pop(context);
}
}
I'm trying to redirect to a new screen after logging in
I am writing an app and need help with changing which screen is being seen, when the google sign in button is pressed it authenticates the profile, but I have no idea how to make it go to the home page after it logs in, so it just redirects back to the log-in page and the log-in process repeats. Any way for me to fix this?
import 'package:flutter/material.dart';
import 'auth.dart';
import 'flutter_auth_buttons.dart';
class LoginScreen2 extends StatelessWidget {
final Color backgroundColor1;
final Color backgroundColor2;
final Color highlightColor;
final Color foregroundColor;
final AssetImage logo;
LoginScreen2({Key k, this.backgroundColor1, this.backgroundColor2, this.highlightColor, this.foregroundColor, this.logo});
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: new Alignment(1.0, 0.0),
// 10% of the width, so there are ten blinds.
colors: [this.backgroundColor1, this.backgroundColor2],
// whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
height: MediaQuery
.of(context)
.size
.height,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 150.0, bottom: 50.0),
child: Center(
child: new Column(
children: <Widget>[
Container(
height: 128.0,
width: 128.0,
child: new CircleAvatar(
backgroundColor: Colors.transparent,
foregroundColor: this.foregroundColor,
radius: 100.0,
child: new Text(
"",
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w100,
),
),
),
),
new Padding(
padding: const EdgeInsets.all(16.0),
)
],
),
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0),
alignment: Alignment.center,
decoration: BoxDecoration(
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 30.0),
alignment: Alignment.center,
child: new Row(
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 100.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
GoogleSignInButton(onPressed: () =>authService.googleSignIn (
)) ,
new Expanded(
child: new FlatButton(
padding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
color: Colors.transparent,
onPressed: () => {},
child: Text(
"",
style: TextStyle(
color: this.foregroundColor.withOpacity(0.5)),
),
),
),
],
),
),
new Expanded(child: Divider(),),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0, bottom: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
color: Colors.transparent,
onPressed: () => {},
child: Text(
"Don't have an account? Create One",
style: TextStyle(
color: this.foregroundColor.withOpacity(0.5)),
),
),
),
],
),
),
],
),
)
]);
}}
class SubPage extends StatelessWidget{
#override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text('Tile'),
),
body: new GridView.count(
crossAxisCount: 2,
children: new List<Widget>.generate(1000, (index) {
return new GridTile(
child: new Card(
color: Colors.blue.shade200,
child: new Center(
child: new Text('tile $index'),
)
),
);
}),
),
);
}
}
I shall assume that the google sign in button is calling an async job that authenticates the user info and returns a promise that informs if its a successful login or not.
In this case, you can navigate to the home page once the response is received.
GoogleSignInButton(
onPressed: () => authService.googleSignIn ().then((response){
if(response is okay){
Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));
}
})
)
I think you don't know how to redirect from one screen to another in Flutter.
This will help you out: https://flutter.dev/docs/development/ui/navigation
In your case you need to use Navigator.pushReplacement when your Google Sign In is completed.
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));
And Google Sign In may return the Future using which you can perform below operation.
Here then is a callback to be called when Google sign in future complete.
authService.googleSignIn.then((someValue){
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));
});
Coming from Android development, what is the equivalent of 'android:layout_gravity="center_vertical"' in Flutter?
I have two boxes wrapped in a Stack that I would like to center align vertically. However, the size of the largest item is not fixed so I am unable to use any fixed values. This presents some difficulty as I have no way of positioning one child in relation to the other child. In Android, all you have to do is set 'layout_gravity' to 'center_vertical' on the child items.
This is what I have so far. The icon's position is fixed which is not good.
class CardItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(72.0, 6.0, 12.0, 6.0),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: 150.0,
),
child: Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(12.0),
color: Colors.white,
child: InkWell(
onTap: () => {},
child: Padding(
padding: EdgeInsets.fromLTRB(76.0, 24.0, 6.0, 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Computer',
style: Theme.of(context).textTheme.headline),
Text('电脑',
style: Theme.of(context).textTheme.subhead.apply(fontWeightDelta: -2)
),
],
),
),
),
),
)
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.fromLTRB(12.0, 0.0, 0.0, 0.0),
child: SizedBox.fromSize(
size: Size.fromRadius(60.0),
child: Material(
elevation: 12.0,
shape: CircleBorder(),
child: Image.asset('image.png'),
),
),
),
),
],
)
);
}
}
Wrap it in an Align widget...
Align(
alignment: Alignment.center,
child: Positioned(
top: 10,
child: Text('hi'),
),
),