I've been trying to achieve this alignment in a flutter AppBar:
I tried doing it in multiple ways, with Flex (which didn't really work, all the widget got clustered together) and with static paddings...
Flex:
Don't know why my sizedBoxes expand... Also I don't know how to align the button, dropdown and drawer to the left...
AppBar(
backgroundColor: Theme.of(context).colorScheme.background,
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit: FlexFit.tight,
flex: 4,
child: Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/danube_logo.png'),
),
],
),
),
),
Flexible(
fit: FlexFit.tight,
flex: 6,
child: Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/eu_logo.png'),
),
],
),
),
),
const Flexible(
fit: FlexFit.tight,
flex: 2,
child: MyTripsButton(),
),
const Flexible(
fit: FlexFit.tight,
flex: 2,
child: LanguageSelector(),
),
const Flexible(
fit: FlexFit.tight,
flex: 2,
child: DrawerMenuButton(),
),
],
),
);
Paddings, kinda work but not the best solution...:
AppBar(
backgroundColor: Theme.of(context).colorScheme.background,
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(left: 13.0, right: 130.0),
child: Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/danube_logo.png'),
),
],
),
),
),
Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Column(
children: const [
Image(
fit: BoxFit.contain,
image: AssetImage('assets/images/eu_logo.png'),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 25.0),
child: const MyTripsButton(),
),
Padding(
padding: const EdgeInsets.only(right: 50.0),
child: const LanguageSelector(),
),
Padding(
padding: EdgeInsets.only(
right: 30.0,
),
child: DrawerMenuButton()),
],
),
);
Am I going around this the wrong way?
Just use two row widgets. Wrap your 2 left widgets within one row and other widgets in the second row. After this wrap both of your rows into a parent row and give the property of spaceBetween. Not the best solution but it will work
Related
I have several images that I need to display on the screen, the first image is center screen and then 3 at the bottom, the layout of the 3 at the bottom is a single image, and 2 below that.
Using Stack and Align Widgets I have gotten the main image center, but the other images are aligning to the top of the screen and not the bottom even though I am specifying it in the Align Widget.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
alignment: Alignment.center,
children: <Widget>[
const Align(
alignment: Alignment.center,
child: Image(
image: AssetImage("assets/imgs/logo.png"),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 40),
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width / 2.5,
child: Image(
image: const AssetImage("assets/imgs/logo1.png"),
width: MediaQuery.of(context).size.width / 2.5,
),
),
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: MediaQuery.of(context).size.width / 4,
child: const Image(
image: AssetImage("assets/imgs/square_logo.jpg"),
),
),
const Padding(
padding: EdgeInsets.all(10),
),
SizedBox(
width: MediaQuery.of(context).size.width / 4,
child: const Image(
image: AssetImage("assets/imgs/square_logo1.png"),
),
),
],
),
],
),
),
),
],
),
);
}
Checkout this one:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Image(
image: AssetImage("assets/imgs/logo.png"),
),
),
Positioned(
bottom: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: MediaQuery.of(context).size.width / 4,
child: Image(
image: AssetImage("assets/imgs/square_logo.jpg"),
),
),
SizedBox(
width: MediaQuery.of(context).size.width / 4,
child: Image(
image: AssetImage("assets/imgs/square_logo1.png"),
),
),
],
),
SizedBox(
width: MediaQuery.of(context).size.width / 2.5,
child: Image(
image: AssetImage("assets/imgs/logo1.png"),
),
),
],
),
),
],
),
);
}
Default Column's mainAxisSize: MainAxisSize.max,,, you can use
mainAxisSize: MainAxisSize.min,
How can I align my widget to take the same width as ClipRect image?
Right now it overflows in my screen. Find attached how it is and how I desire my output would be.
Is it possible to center it within the red lines I drew?
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Flexible(
child: Column(
children: <Widget>[
ColumnWithMainChild(
mainChildKey: mainChildKey,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
imgparam,
width: 350,
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'Good with children: $param_good_children',
),
GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
)
],
),
Divider(),
Text(
'Good with children: $param_good_children',
),
],
),
),
),
],
),
]));
}
}
Do the following Changes
Set Padding to Parent column
Set width of NetworkImage to double.infinity
Wrap your Progress Bar with Flexible
Code:
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Scaffold(
appBar: AppBar(),
body: Padding( // Set Padding to Paren
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
"https://images.unsplash.com/photo-1474922651267-219b23864ae8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
width: double.infinity, // Set width of NetworkImage to double.infinity
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
const Text(
'Good with children: 5',
),
Flexible( //Wrap your Progress Bar with Flexible
child: GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
),
)
],
),
const Divider(),
const Text(
'Good with children: 5',
),
],
),
),
),
]),
),
);
}
Output:
Hi so currently i have a card that looks like this:
And i want to change it so the text that says test is at the bottom of the card, like below:
Also if you see i added a arrow on the bottom line as well which is where i would like to add a button.
The code i have currently is below:
#override
Widget build(BuildContext context) {
return Container(
height: 160,
child: GestureDetector(
onTap: tap,
child: Card(
color: Colors.white,
elevation: 2,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(img),
fit: BoxFit.cover,
))),
),
Flexible(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(2, 5, 2, 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: TextStyle(fontSize: 17, color: Colors.black)),
SizedBox(height: 10.0),
Center(
child: Text("Header", style: TextStyle(color: fontSize: 35)),
),
SizedBox(height: 5.0),
]),
)),
Center(
child: Text('test'),
),
],
),
),
));
}
How could i do this?
Try the following. Make effort the next time ;)
Card(
// ...
child: Row(
children: [
Flexible(
flex: 2,
// ... your image section
),
Flexible(
flex: 3,
child: Column(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ... your title
// ... your header
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Test"),
MaterialButton(
onPressed: () {},
child: Text("Your Button"),
)
],
),
],
),
),
],
),
),
Need to show image above other image outside the widget margin.
I tried using stack, but it not coming outside.
Stack(children: <Widget>[
Container(child: Image.asset('assets/discover.png')),
Row(
children: <Widget>[
Expanded(child: Text(''), flex: 9),
Expanded(
child: ClipRRect(
borderRadius: new BorderRadius.circular(80.0),
child: Image.asset('assets/user.jpg')),
flex: 6,
),
Expanded(child: Text(''), flex: 9)
],
),
]);
Below source code works for your scenario. You have to give top padding for the image's container and make the entire stack's alignment as topCenter.
Additional things:
Consider giving height and width for the circled image.
Keep the big image widget in AspectRatio widget to occupy the full width of its parent widget and give fit property as well for showing entire image in the right fit.
.
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 40),
child: AspectRatio(aspectRatio: 1, child: Image.asset('assets/discover.png', fit: BoxFit.cover),),
),
ClipRRect(
borderRadius: new BorderRadius.circular(40.0),
child: Image.asset('assets/user.jpg', height: 80, width: 80),
),
],
)
return Scaffold(
appBar: AppBar(
title: const Text('Flutter demo'),
),
body: Container(
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
alignment: Alignment.topCenter,
child: Stack(children: <Widget>[
Container(
margin: EdgeInsets.only(top: 30),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQGLanNnFsLi3QnQFdh-k-mkwG6yrEEXhorSoElObizTnP0_8rR')),
),
Align(
alignment: Alignment.topCenter,
child: CircleAvatar(
radius: 30.0,
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSIekuJOwtOWtZl9QX3t46Yz_7RCZ4Kpebnugsst2OFfNl-SGjf'),
backgroundColor: Colors.grey,
),
)
]),
));
Stack(children: <Widget>[
Container(
margin: EdgeInsets.only(top: 50.0),
child: Image.network(
'https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg'),
),
Row(
children: <Widget>[
Expanded(child: Text(''), flex: 9),
Expanded(
child: ClipRRect(
borderRadius: new BorderRadius.circular(80.0),
child: Image.asset('assets/ic_profile.png'),
),
flex: 6,
),
Expanded(child: Text(''), flex: 9)
],
)
]),
I was tried my app on the phone and on the tablet. The design looks bad if the design is good on the other screen. I have shared an image that phone and tablet so you can see what design looks different when using different screen sizes.How can I set my design on all different screen sizes with Flutter?
My code :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(Myapp());
}
class Myapp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.red),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"The Bar ",
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
),
),
),
floatingActionButton: FloatingActionButton(
splashColor: Colors.green,
child: Icon(
Icons.mouse,
color: Colors.white,
),
onPressed: () {
print("You was clicked the button!");
},
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
"Kinds of Butoons and Images",
style: TextStyle(fontSize: 26, color: Colors.blue),
textAlign: TextAlign.center,
),
Container(
child: Expanded(
flex: 1,
child:Column(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Row(
children: <Widget>[
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/images/test.jpg"),
radius: 140,
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
Container(
child: Expanded(
flex: 1,
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Row(
children: <Widget>[
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/images/test.jpg"),
radius: 140,
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
),
);
}
}
To limit CircleAvatar's height, use LayoutBuilder and ConstrainedBox:
LayoutBuilder(
builder: (context, constraints) {
return ConstrainedBox(
constraints: BoxConstraints(
maxHeight: constraints.maxWidth,
maxWidth: constraints.maxWidth
),
child: CircleAvatar(
backgroundImage: NetworkImage('...'),
radius: 140,
),
);
}
),