How to align widgets in a GridView in Flutter? - flutter

I want to align the contents of a GridView item to the center (both vertically and horizontally) without changing the size of the widget.
This code creates a GridView with an item in it, it has a default top-center alignment and the size is a default square.
GridView.count(
crossAxisCount: 3,
children: [
Container(
// alignment: Alignment.center,
child: RaisedButton(
child: Column(
children: [
Text("Top text"),
Text("Bottom text"),
],
),
onPressed: (){}
),
),
],
);
And it looks like this:
When I uncomment the alignment, it doesn't align the items correctly and the size of the item changes, I don't want neither of them.
Note that I need multiple Widgets in that GridView item, so I can't remove the Column (but maybe I can replace it?).

I don't see any size change after adding mainAxisAlignment to the Column. Please run the code below :
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 3,
children: [
Container(
// alignment: Alignment.center,
child: RaisedButton(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Top text"),
Text("Bottom text"),
],
),
onPressed: () {}),
),
],
);
}
}

Related

Display aspect ratio item and image in a row in flutter

Let's say that I want create a Flutter app. In my app I want to create a Row widget with the following children:
AspectRatio(aspectRatio: 1, child: Center(child: Text("I am text!"))
Image.asset("path/to/asset.png") with unknown aspect ratio
I want to display that Row while keeping both aspect ratios intact. How can I do that?
Here is my attempt:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("This is my app")),
body: Container(
child: Row(children: [buildItem1(), buildItem2()]),
),
);
}
Widget buildItem1() {
return AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.red, child: Center(child: Text("This is my text"))));
}
Widget buildItem2() {
return Image.asset("path/to/my/asset.jpg");
}
}
And this is what being displayed:
I am trying to figure out a way to automatically shrink the row height such that both items would fit the screen.
If I use a fixed hight like that:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("This is my app")),
body: Container(
height: 300,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [buildItem1(), buildItem2()],
),
),
);
}
...
Than I get the following:
Which is better, but I want to fill the entire width of the screen.
Thanks for anyone who can help!
You can use Expanded on second widget, that will get the avialable space on row. Also for the image use fit: BoxFit.cover(better looks than width).
body: Container(
height: 300,
child: Row(
children: [buildItem1(), Expanded(child: buildItem2())],
),
),
Widget buildItem2() {
return Image.asset(
"assets/images/user.png",
fit: BoxFit.cover,
);
}
Now if you want full screen, I will prefer
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Center(
child: Text("This is my text"),
)),
),
Expanded(
child: Image.asset(
"assets/images/user.png",
fit: BoxFit.cover,
)),
],
),
Also LayoutBuilder on scaffold's body provide more options. Also check IntrinsicHeight.

How to put logo a little bit higher and add text above it

I'm new in flutter world. I'm trying to put a little bit this logo up and add text above it.
I found that I need Stack and Positioned Widget to position my logo and sure I can position this logo with i.e: top: 20, bottom: 20 etc but then I thought, I'm positioning it versus my emulator with certain height and weidth, what about devices with other resolutions? It should be dynamic I guess?
Could you tell me how can I achieve it?
Here is how it should looks:
How it looks now (dont mind about this logo, it's just an example)
And my another question. How can I add some text above this logo?
The code I wrote:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: const Color(0xFEC2C2C2),
body: Stack(
children: <Widget>[
Positioned.fill(
child: Image(
image: AssetImage('assets/images/logo.png'),
),
),
],
),
),
),
);
}
try this code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(50.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('This is My Brand Name',
style: Theme.of(context).textTheme.headline5),
SizedBox(
height: 20.0,
),
FlutterLogo(
size: 150,
)
],
),
),
);
}
}
Demo: https://i.stack.imgur.com/FTPqh.jpg

How to positioned widget toLeftOf or toRightOf in Flutter

I first want to center one widget and then add another widget to the right of the center widget.
Currently, flutter APIs are not feasible for this. In android, it can be easily done in relative layout or constraint layout.
I tried with some hack with MediaQuery,
Stack(
children: [
Center(child: Text(17)),
Positioned(
bottom: 0,
left: (screenWidth / 2) + (screenWidth / 3),
child: Column(
children: []
)
)
How to try this in an easy way or a proper way.
You can use the Align widget for this.
Code Example
import 'package:flutter/material.dart';
class SandBox extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 300,
height: 300,
color: Colors.blue,
child: Align(
alignment: Alignment.centerRight, //aligns the child widget to the right center
child: Text('17'),
),
),
),
);
}
}
Maybe, it can help you to achieve what you want:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 30,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Text('17'),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
),
],
),
);
}
}
Or you can adjust it using some calculations using MediaQuery and Stack.
You can use badges package to achieve this goal.
Finally, I found used https://pub.dev/packages/align_positioned
AlignPositioned.relative(
Text(day.englishDate.toString(),
textScaleFactor: 3, style: dayTextStyle),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
....
],
),
moveByChildWidth: 1.1,
minChildWidthRatio: 1,
moveByChildHeight: 0.3)
Please use Align along with Row.
here is simple code to achieve this.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children:[
Align(
child : Row(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Padding(child: Text('Left'),padding: EdgeInsets.all(5)),
Text('Center widget'),
Padding(child: Text('Right'),padding: EdgeInsets.all(5))
]) ,
alignment: Alignment.center),
]
),
),
);
}
}
Here is the output:

Flutter: I want to display "Grid View" and other widgets together on the screen

I was able to display the child widgets in a grid using the GridView widget,
Widgets such as text and GridView widgets together on one screen
How can I display it?
For example
//sign_in_page.dart
class SignInPage extends StatelessWidget {
void _signInAnonymously() async {
final authResult=await FirebaseAuth.instance.signInAnonymously();
print('${authResult.user.uid}');
}
#override
Widget build(BuildContext context) {
List<Widget> list1=[
SizedBox(
width:50.0,
height:50.0,
child:Container(
color:Colors.blue,
),
),
SizedBox(
width:100.0,
height:100.0,
child:Container(
color:Colors.red,
),
),
SizedBox(
width:100.0,
height:100.0,
child:Container(
color:Colors.green,
),
),
SizedBox(
width:100.0,
height:100.0,
child:Container(
color:Colors.yellow,
),
),
];
return Scaffold(
appBar: AppBar(
title: Text('title'),
elevation: 10.0,
),
//body: buildContent(),
body:Column( //←This will give an error.
children: [
Text('Description of this GridView'),
GridView.count(
crossAxisCount: 3,
children: list1
),
],
),
backgroundColor: Colors.grey[300],
);
}
//main.dart
import 'package:flutter/material.dart';
import 'app/sign_in/sign_in_page.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title:'title',
theme:ThemeData(
primarySwatch: Colors.indigo,
),
home:SignInPage(),
);
}
}
I want to display the text and grid view,
but when I try to display it using the Column widget as above,
I get an error.
Is there any suitable widget to use in this situation?
I guess You should wrap Your GridView.count() with an Expanded() to specify the height, like
Expanded(
child: GridView.count()
)

image full screen with Text (_getTellText(text) Expanded flutter

Trying to make the image full screen with
Text (_getTellText(text) end the screen, inside the screen.
the buttons start and next in Other Expanded .
Can't expand the image although I've tried several methods
The image is not sized to a full screen has a space
and i dont know how put _getTellText(text) bottom .
_getPage({Color bgColor, Image image, String text, int index, String hint}) {
return Scaffold(
body: Container(
color: bgColor,
child: Column(
children: <Widget>[
Expanded(
flex: 8,
child: image,
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: _getPageNav(),
),
],
),
)
],
),
),
);
}
Hopefully, this will work for you. As I didn't completely understand your question but as far as I understood, you meant, you wanted to set an Image to occupy complete screen with text on bottom, here I have used an image that was not at all portrait and have it fit the entire screen.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: FullScreenImage('https://flutter.dev/images/flutter-logo-sharing.png','Flutter'),
),
),
);
}
}
class FullScreenImage extends StatelessWidget {
final String image;
final String text;
FullScreenImage(this.image,this.text);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child:Image.network(
image,
fit: BoxFit.cover,
), ),
Positioned(
bottom:0,
child:Text(text,),),
],
);
}
}