Flutter: How to position a logo image based on coordinates? - flutter

I don't want to center the image and text, but I want to set a specific coordinate for it. I can't seem to get the alignment command to work.
Currently my logo image and text is posited as following:
I want the logo image and text to be towards the center but a little bit upwards on the y axis, not entirely centered vertically.
This is my main.dart code:
import 'package:flutter/material.dart';
import 'login_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new LoginPage(),
theme: new ThemeData(
primarySwatch: Colors.green
)
);
}
}
This is my login_page.dart code:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget{
#override
State createState() => new LoginPageState();
}
class LoginPageState extends State<LoginPage>{
#override
Widget build(BuildContext context){
return new Scaffold(
appBar: AppBar(
title: new Text("SMART ID", textAlign: TextAlign.center, style: TextStyle(fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/arrowPNG.png",
scale: 8.0,
)
)
),
backgroundColor: Colors.transparent,
body: Container(
child: Column(
children: <Widget>[
Image.asset('assets/arrowPNG.png', scale: 2.5),
SizedBox(height: 20,),
Text("SMARTID", style: TextStyle(
fontSize: 30, color: Colors.black, fontFamily: 'Open Sans', fontWeight: FontWeight.bold,
))
],
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
fit: BoxFit.cover,
)
)
)
);
}
}
Thanks in advance!

You can move background image and logo inside a Stack and then use Positioned for placing logo from the vertical position.
class LoginState extends State<Login> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SMARTID", textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/images/appicon.png",
scale: 8.0,
)
)
),
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Container(
alignment: Alignment(0, -0.5),
width: MediaQuery
.of(context)
.size
.width,
height: MediaQuery
.of(context)
.size
.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
)
)
),
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.30,//TRY TO CHANGE THIS **0.30** value to achieve your goal
child: Container(
margin: EdgeInsets.all(16.0),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/appicon.png', scale: 2.5),
SizedBox(height: 20,),
Text("SMARTID", style: TextStyle(
fontSize: 30, color: Colors.white,fontFamily: 'Open Sans',
fontWeight: FontWeight.bold))
]
),
))
],
)
);
}
}
Output

If I understand, I'll try to help you:
First of all, you can Align your Itens in the Center of the Column:
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/arrowPNG.png', scale: 2.5),
SizedBox(height: 20,),
Text("SMARTID", style: TextStyle(
fontSize: 30, color: Colors.black, fontFamily: 'Open Sans', fontWeight: FontWeight.bold,
))
],
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
fit: BoxFit.cover,
)
)
)
);
After this, you can using Padding or Margin in your container to push up the logo. You can try what distance is better for you. And here's your code:
Container(
padding: EdgeInsets.only(bottom: 25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/arrowPNG.png', scale: 2.5),
SizedBox(height: 20,),
Text("SMARTID", style: TextStyle(
fontSize: 30, color: Colors.black, fontFamily: 'Open Sans', fontWeight: FontWeight.bold,
))
],
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
fit: BoxFit.cover,
)
)
)
);
I hope it works.

Related

The widget is not appearing up - Flutter

I'm using AdvancedPageTurn widget from advanced_page_turn package. I wrapped this widget inside the Scaffold body property. The widget is appearing on the simulator perfectly, but when I launch the application on the real device, that particular AdvancedPageTurn widget is not appearing up at all.
What could be the problem?
class Lyrics extends StatefulWidget {
#override
_LyricsState createState() => _LyricsState();
}
class _LyricsState extends State<Lyrics> {
final _controller = GlobalKey<AdvancedPageTurnState>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('App Title', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'oswald'),),
centerTitle: true,
flexibleSpace: Image(
image: AssetImage('images/bg.jpg'),
fit: BoxFit.cover,
),
),
body: SafeArea(child: AdvancedPageTurn( // The Widget content is not appearing up at all but working fine on emulator
key: _controller,
initialIndex: 0,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bg.jpg'), fit: BoxFit.cover),
),
padding: EdgeInsets.all(25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Title 1', style: TextStyle(fontSize: 28.0, height: 1.8, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
],
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bg.jpg'), fit: BoxFit.cover),
),
padding: EdgeInsets.all(25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Title 2', style: TextStyle(fontSize: 28.0, height: 1.8, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
],
),
),
],
),
),
);
}
}

Scaffold body content is not appearing up - Flutter

I'm using an advanced page turn widget to show the flipping the effect between pages and it's working perfectly fine on an emulator but when I run the application on the real device, the body content is not appearing up at all (just showing a grey screen)
the page turn widget is wrapped inside the body, so I guess it has to do something with the widget
Note:- The body content is appearing up on an emulator
Package link https://pub.dev/packages/advanced_page_turn
Here is my code
class Lyrics extends StatefulWidget {
#override
_LyricsState createState() => _LyricsState();
}
class _LyricsState extends State<Lyrics> {
final _controller = GlobalKey<AdvancedPageTurnState>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('App Title', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'oswald'),),
centerTitle: true,
flexibleSpace: Image(
image: AssetImage('images/bg.jpg'),
fit: BoxFit.cover,
),
),
backgroundColor: Colors.grey[200],
body: SafeArea(child: AdvancedPageTurn( // The body content is not appearing up at all but working fine on emulator
key: _controller,
initialIndex: 0,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bg.jpg'), fit: BoxFit.cover),
),
padding: EdgeInsets.all(25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Title 1', style: TextStyle(fontSize: 28.0, height: 1.8, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
],
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bg.jpg'), fit: BoxFit.cover),
),
padding: EdgeInsets.all(25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Title 2', style: TextStyle(fontSize: 28.0, height: 1.8, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
],
),
),
],
),
),
);
}
}

Adding background in flutter dashboard

Please any expert who can suggest to me how to a background picture in this dashboard, I'll be very thankful.
When I add boxfit in the following scaffold widget the code got red lines.
Please any expert who can suggest to me how to a background picture in this dashboard, I'll be very thankful.
When I add boxfit in the following scaffold widget the code got red lines.
import 'package:google_fonts/google_fonts.dart';
import 'package:maps_app/screens/Dash_board.dart';
class Dashboard extends StatefulWidget {
static const routeName = '/home1';
#override
DashboardState createState() => new DashboardState();
}
class DashboardState extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
body: Column(
children: <Widget>[
SizedBox(
height: 110,
),
Padding(
padding: EdgeInsets.only(left: 16, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"ColorLine",
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Colors.black87,
fontSize: 24,
fontWeight: FontWeight.bold)),
),
SizedBox(
height: 4,
),
Text(
" Home",
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Color(0xff000000),
fontSize: 14,
fontWeight: FontWeight.w600)),
),
],
),
IconButton(
iconSize: 70,
alignment: Alignment.center,
icon: Image.asset(
"assets/colorline.png",
width: 100,
height: 100,
),
onPressed: () {},
)
],
),
),
SizedBox(
height: 40,
),
GridDashboard()
],
),
);
}
}
Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/background.jpeg"),
fit: BoxFit.cover,
),
),
child: ...
),
);
What you want to do is wrap your Scaffold with a Container Widget. Also, you need to make the Scaffold's color transparent. I will be using a bit of Vlad Konoshenko's answer to help you with this.
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/background.jpeg"),
fit: BoxFit.cover,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
// Rest of the code remains same.
...
),
);

Is there a way to include Multiple Children inside a Container?

This is full code:
class Application extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Container(
color: Color(0xff258DED),
height: 400.0,
alignment: Alignment.center,
child: new Container(
height: 200.0,
width: 200.0,
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/logo.png'),
fit: BoxFit.fill
),
shape: BoxShape.circle
),
),
child: new Container(
child: new Text('Welcome to Prime Message',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Aleo',
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white
),
),
),
),
),
);
}
}
I tried to add a Container on top and then added two children inside it. First child works fine, but second child giving me error like "the argument for the named parameter 'child' was already specified".
If you try to put more than one child in a container, you want to look as Row() or Column() class for linear ones. Stack() is used if you want to have floating children on top of each other.
Eg:
class Application extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Container(
color: Color(0xff258DED),
height: 400.0,
alignment: Alignment.center,
child: new Column(
children: [
new Container(
height: 200.0,
width: 200.0,
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/logo.png'),
fit: BoxFit.fill
),
shape: BoxShape.circle
),
),
new Container(
child: new Text('Welcome to Prime Message',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Aleo',
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white
),
),
),
],
),
),
),
);
}
}
Container is a Single-child layout widget. But it can have multiple children by using a Multi-child layout widget as its child.
In the container can be only child.
You have to use Column widget and add Container widgets as children if you want them position vertically.
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Container(
color: Color(0xff258DED),
height: 400.0,
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
height: 200.0,
width: 200.0,
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/logo.png'),
fit: BoxFit.fill
),
shape: BoxShape.circle
),
),
Container(
child:Text('Welcome to Prime Message',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Aleo',
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white
),
),
),
],
),
),
),
);
}
tip #1 You don't have to use 'new' word to create object.
tip #2 Read about Column, Row and Stack on flutter.dev
Please check below code:-
#override
Widget build(BuildContext mContext) {
return MaterialApp(
home: Scaffold(
body: Container(
color: Color(0xff258DED),
height: 400.0,
alignment: Alignment.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 200.0,
width: 200.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/logo.png'),
fit: BoxFit.fill
),
shape: BoxShape.circle
),
),
Container(
child: Text('Welcome to Prime Message',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Aleo',
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white
),
),
),
],
),
),
),
);
}

how to match height of a row widget which is tallest among other widgets

I've defined a Row of column widgets but unable to match height of other widgets defined in a Row
I have tried with Expand , Intrinsic Height, width, Contrained box, and defining containers inside each column.
Expected Results are to match height with parent/other row widgets[enter image description here][1]
Widget columnOne(String t1, String t2) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8)),
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.white,
child: Padding(
padding:
EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Align(
alignment: Alignment.center,
child: Text(t1,
style: TextStyle(
fontSize: 30,
color: Colors.black,
backgroundColor: Colors.white,
fontFamily: 'FJ',fontWeight: FontWeight.bold
)),
)
),
),
IntrinsicHeight(
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: Container(
color: Colors.red,
child: Padding(
padding: EdgeInsets.all(10),
child: Align(
alignment: Alignment.center,
child: Text(t2 ,
textAlign: TextAlign.center,
textWidthBasis: TextWidthBasis.parent,
style: TextStyle(
fontSize: 16,
color: Colors.black,
backgroundColor: Colors.red,
)),
))),
)
)
],
),
),
);
}
https://i.stack.imgur.com/HfYOl.png
Current result If I change text/overflow the text
https://i.stack.imgur.com/t9MTK.png
Expected
Judging by the design, the bottom of the card can only be one or 2 lines high.
In this case, it’s easier not to rely on the automatic height, but to use fixed values.
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as v_math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: RowExample(),
),
),
);
}
}
class RowExample extends StatelessWidget {
final List<List<String>> entities = [
['22', 'fdslfdssdf'],
['22', 'sdfdssf fd fasdf '],
['3242', 'sdsf'],
];
#override
Widget build(BuildContext context) {
return Row(
children: entities.map((item) => columnOne(item[0], item[1])).toList(),
);
}
Widget columnOne(String t1, String t2) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8)),
child: Container(
height: 130,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color: Colors.white,
),
child: Column(
children: <Widget>[
Container(
height: 70,
color: Colors.white,
child: Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Align(
alignment: Alignment.center,
child: Text(t1,
style: TextStyle(
fontSize: 30,
color: Colors.black,
backgroundColor: Colors.white,
fontFamily: 'FJ',
fontWeight: FontWeight.bold)),
)),
),
Expanded(
child: Container(
color: Colors.red,
child: Padding(
padding: EdgeInsets.all(10),
child: Align(
alignment: Alignment.center,
child: Text(t2,
textAlign: TextAlign.center,
textWidthBasis: TextWidthBasis.parent,
style: TextStyle(
fontSize: 16,
color: Colors.black,
backgroundColor: Colors.red,
)),
))),
)
],
),
),
);
}
}