I am trying to pull row to end of cross-axis (to bottom of the screen).
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
child: FlutterLogo(
size: 60,
),
),
Container(
child: FlutterLogo(
size: 60,
colors: Colors.red,
),
),
Container(
child: FlutterLogo(
size: 60,
colors: Colors.cyan,
),
),
],
));
}
}
But it's not working. What I am doing wrong?
You have no height set, so wrap the row in a widget that does
eg.
body: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
child: FlutterLogo(
size: 60,
),
),
Container(
child: FlutterLogo(
size: 60,
colors: Colors.red,
),
),
Container(
child: FlutterLogo(
size: 60,
colors: Colors.cyan,
),
),
],
)
]
),
There are other widgets that may be better but it depends on your content
https://api.flutter.dev/flutter/widgets/Align-class.html
https://api.flutter.dev/flutter/widgets/Positioned-class.html
Related
I want to hold background image and swipe pageview screen.
However, it seems that I can't swipe if I put image file(I can do only when I delete background image) even though you can see the pageindicator.
](https://i.stack.imgur.com/oXYaL.jpg)
please let me know how to do it. Is there any way to solve it? I don't know what I missed here.
import 'package:eseowakorean/page/secondpage/add_image_profile1.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile2.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile3.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile4.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import '../../widgets/text_widgets.dart';
class AddInformationOnBoarding extends StatefulWidget {
const AddInformationOnBoarding({super.key});
#override
State<AddInformationOnBoarding> createState() =>
_AddInformationOnBoardingState();
}
class _AddInformationOnBoardingState extends State<AddInformationOnBoarding> {
PageController _controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
PageView(
controller: _controller,
children: [
AddImageProfile1(),
AddImageProfile2(),
AddImageProfile3(),
AddImageProfile4(),
],
),
Container(
height: double.infinity,
width: double.infinity,
// alignment: Alignment.center,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/home.jpg',
),
fit: BoxFit.cover),
),
child: Column(
children: [
SizedBox(
height: 60,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset('assets/Skip.svg'),
// poppinsTextWidget('hi')
],
),
),
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
],
),
],
),
),
Container(
alignment: Alignment(0, 0.75),
child: Row(
children: [
SmoothPageIndicator(controller: _controller, count: 4),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
],
),
);
}
}
You are containing everything within the same stack. Add the image itself in another Stack widget.
Try this example:
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
Image.asset(
"assets/home.jpg",
),
Stack(
children: [
PageView(
controller: _controller,
children: [
AddImageProfile1(),
AddImageProfile2(),
AddImageProfile3(),
AddImageProfile4(),
],
),
Column(
children: [
SizedBox(
height: 60,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset('assets/Skip.svg'),
// poppinsTextWidget('hi')
],
),
),
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
],
),
],
),
Container(
alignment: Alignment(0, 0.75),
child: Row(
children: [
SmoothPageIndicator(controller: _controller, count: 4),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
],
),
],
),
);
I want one row with this one big image on left and two images on right with one up and the second down.
thanks in advance if Someone can help!!
The key insight is to break the layout into nested rows and/or columns. Check out this example,
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatefulWidget {
#override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: getContainer(Colors.green),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: getContainer(Colors.yellow),
),
Expanded(
child: getContainer(Colors.red),
)
],
),
),
],
),
),
);
}
}
Widget getContainer(MaterialColor color) =>
Container(height: 50, width: 50, color: color);
Everything is contained in one row, the first column will be larger than the second one with the widget Expanded flex :1. In the second column, there's a column widget with that you'll have two rows for your image.
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Row(
children: [
Expanded(
child: SizedBox(
child: Image.asset('your large image'),
),
flex: 1,
),
Expanded(
child: Column(
children: [
Image.asset('your second image'),
Image.asset('your third image'),
],
),
flex: 0,
)
],
),
),
);
}
}
solved
**here is the example **
import 'package:flutter/material.dart';
class BagScreen extends StatelessWidget {
const BagScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
// color: Colors.red,
height: 400,
width: 400,
child: Row(
children: [
Container(
child: Image.asset(
"assets/images/bgimage.PNG",
fit: BoxFit.contain,
width: 250.0,
// height: 350.0,
),
),
SizedBox(
width: 10.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
height: 10.0,
),
Container(
child: Image.asset("assets/images/upsm.PNG"),
),
Container(
child: Image.asset("assets/images/upsm.PNG"),
),
],
)
],
),
),
),
);
}
}
I have a chat bubble with username, timestamp and chat message. It is divided into two rows.
First row is username and timestamp, second row is the chat message.
With the code below it looks like this:
I want the timestamp to be aligned right but the blue box should not be wider then the message line except the message is shorter than username and timestamp.
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 Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Username"),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width - 120),
child: Text("A long message text 123456789")),
],
))
]);
}
}
Try this:
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Username"),
Spacer(),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
This will solve your problem.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Username"),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
Text("A long message text 123456789"),
],
),
)
],
);
}
}
I want to create BottomAppBar with rounded corners, circular notched rectangle and material shadow.
The problem is that when I add rounded corners to BottomAppBar by wrapping it with ClipRRect widget I lose material shadow.
BottomAppBar without rounded corners, but with Material shadow. Please ignore wrong aligned notch.
BottomAppBar wrapped in ClipRRect widget, but without shadow. Again please ignore wrong aligned notch:
How to achieve rounded corners with notch and material shadow?
Full code:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
extendBody: true,
body: Container(
color: Colors.amber,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Transform.translate(
offset: Offset(0, -10),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
elevation: 2.0,
),
),
bottomNavigationBar: BottomNavigationView(),
),
);
}
}
class BottomNavigationView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -10),
child: Container(
margin: EdgeInsets.only(left: 20, right: 20),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30),
),
child: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessibility_new),
],
),
_buildMiddleTabItem(),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessibility_new),
],
)
],
),
),
),
),
);
}
Widget _buildMiddleTabItem() {
return Expanded(
child: SizedBox(
height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 24),
Text(''),
],
),
),
);
}
}
You can create your own ShapeBorder.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
extendBody: true,
body: Container(
color: Colors.amber,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Transform.translate(
offset: Offset(0, -10),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
elevation: 2.0,
),
),
bottomNavigationBar: BottomNavigationView(),
),
);
}
}
class BottomNavigationView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -10),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: ShapeDecoration(
color: Colors.white,
shape: MyBorderShape(),
shadows: [
BoxShadow(
color: Colors.black38, blurRadius: 8.0, offset: Offset(1, 1)),
],
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessibility_new),
],
),
_buildMiddleTabItem(),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessibility_new),
],
)
],
),
),
);
}
Widget _buildMiddleTabItem() {
return Expanded(
child: SizedBox(
height: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 24),
Text(''),
],
),
),
);
}
}
class MyBorderShape extends ShapeBorder {
MyBorderShape();
#override
EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
#override
Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;
double holeSize = 70;
#override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
print(rect.height);
return Path.combine(
PathOperation.difference,
Path()
..addRRect(
RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
..close(),
Path()
..addOval(Rect.fromCenter(
center: rect.center.translate(0, -rect.height / 2),
height: holeSize,
width: holeSize))
..close(),
);
}
#override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}
#override
ShapeBorder scale(double t) => this;
}
In my Flutter project, I have initialized a container. Inside that Container I have a child 'column' and inside that I initialized 3 icons as my widget. So, I want to align the entire container block ( White block in the picture given below) to the end of the screen vertically. As far as I know from the documentation, that it can be done by the following command-
mainAxisAlignment: MainAxisAlignment.end
But it is not working here and showing the following output-
And here's my code-
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
],
)
),
),
),
);
}
}
So, I need help to know how I can align the white block into the end of the screen.
Yes this is happening because by default the container and the column are being aligned at the top left corner of the screen. MainAxisAlignment.end is actually working except that your column is so short that the .end and .start are essentially the same in terms of alignments. What you need to do instead is this:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Align(
widthFactor: double.infinity,
heightFactor: double.infinity,
alignment: Alignment.bottomRight,
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
],
)
),
),
),
),
);
}
}
Try using crossAxisAlignment: CrossAxisAlignment.end instead of mainAxisAlingment.
EDIT:
As #Stephen mentioned you need full height in order to align the children.
Besides that you can also set full width to the container to get the children exactly at the end of the screen.
Note: The top-level widget usually constrains the sub-level widgets!
body: SafeArea(
child: Container(
color: Colors.white,
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
],
)
),
),
If you want to keep the height to be exactly that of the icons, you can use stack instead. It will look something like this:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Stack(
children: <Widget>[
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
],
),
)
],
),
),
),
);
}
}
You just need to change mainAxisSize: MainAxisSize.min to mainAxisSize: MainAxisSize.max
Currently you column widget is only making itself as tall as it needs to be. changing to MainAxisSize.max will have it expand to the full height you are looking for.
Further reading:
https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e