I'm doing a simple landing page using flutter. When I try to use an SVG file, the file somehow is flat, isn't it supposed to be not flat??
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:simple_app/my_icon.dart';
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Column(
children: <Widget>[
Container(
height: size.height*0.6 ,
width: double.infinity,
decoration: new BoxDecoration(
color: Colors.blueAccent,
),
child: Column(
children: <Widget> [
Align(
child: SvgPicture.asset(
dika,
),
alignment: Alignment.topLeft,
),
],
),
),
],
);
}
}
I tried your code and it works fine, I assume your .svg file is broken, you could try to remove shadows and filter effects from your svg, they're not supported.
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Column(
children: <Widget>[
Container(
height: size.height*0.6 ,
width: double.infinity,
decoration: new BoxDecoration(
color: Colors.blueAccent,
),
child: Column(
children: <Widget> [
Align(
child: SvgPicture.asset(
'assets/hexagon.svg',
),
alignment: Alignment.topLeft,
),
],
),
),
],
);
}
}
SVG in top left corner:
Related
I'm trying to center both texts, and for the T text to take as much height as possible from the parent so the only space remaining will be the container's paddings.
The code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(TestApp());
}
class TestApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Remove status bar
SystemChrome.setEnabledSystemUIOverlays([]);
return MaterialApp(
home: Scaffold(
body: _body(),
),
);
}
Widget _body() => Container(
width: 200,
height: 200,
padding: EdgeInsets.all(16),
color: Colors.lightBlueAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.lightGreen,
child: FittedBox(
fit: BoxFit.contain,
child: Text("T"),
),
),
),
Flexible(
child: Text("subtitle"),
)
],
),
);
}
As you can see in the screenshot there are undesired paddings in the T text:
I'm having some hard time using Alignments in Flutter. I'm trying to create a disposable card.
I can't have the Image centerd and the icon placed on the top right corner.
Widgets Explanation
The Card consists of Columns and each Column has a Row
The x Icon is the first child of the first Row
I wrapped the Icon with Align Widget but it won't move on the right:
Row(children: [
Align(
alignment: Alignment.topRight,
child: Icon(Icons.cancel),)
]
)
For the owl image i wrapped it inside a Container and used the alignment property to place in the the Center:
Row(children: [
Container(
width: 100,
height: 150,
alignment: Alignment.center,
child: Image(
alignment: Alignment.center,
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)
),
]),
Seems like no matter what I try on the layout it just won't move the objects inside the Card
Here is the Card Widget:
class CustomCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(children: [
Align(
alignment: Alignment.topRight,
child: Icon(Icons.cancel) ,
)
]
),
SizedBox(
height: 8,
),
Row(children: [
Container(
width: 100,
height: 150,
alignment: Alignment.center,
child: Image(
alignment: Alignment.center,
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
))
]),
],
));
}
}
No matter what i try i can't have them placed correctly, have I completely missed the concepts of Align widget and alignment property?
All you needed to do was set the MainAxisAlignment to center for the Row. 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: CustomCard(),
),
);
}
}
class CustomCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.topRight,
child: Icon(Icons.cancel),
),
SizedBox(
height: 8,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
width: 100,
height: 150,
child: Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
))
]),
],
));
}
}
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
TL;DR
Is it possible to align ListView's children like Column's spaceBetween alignment?
Like in this screenshot:
Problem that I tried to solve:
In the beginning I had a Column widget with 2 children. The Column's alignment was set to spaceBetween. It was what I wanted, one widget at the top, one at the bottom. But then when I clicked to input to add credentials, the keyboard caused an overflow issue described in this GitHub issue. So to fix it, I replaced the Column with ListView. But now my children widgets are stuck at the top of the screen.
My full LoginScreen code:
import 'package:flutter/material.dart';
import '../widgets/button.dart';
import '../widgets/input.dart';
import '../widgets/logo.dart';
class LoginScreen2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Background(),
Wrapper(),
],
),
);
}
}
class Background extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Color(0xfff6f6f6),
Colors.white,
],
),
),
);
}
}
class Wrapper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Logo(LogoColor.dummy_black),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(20),
child: BottomPart(),
),
),
],
);
}
}
class BottomPart extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Input('User name'),
Input('Password'),
Button(
'Log in',
onPressed,
),
],
);
}
void onPressed() {}
}
You could use ListView's property reverse
reverse: true,
And then change the order of the ListView children.
Find a solution. You should wrap your Column in IntrinsicHeight and ConstrainedBox with minHeight.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: IntrinsicHeight(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height,
),
child: Column(
children: [
Container(
height: 100,
width: double.infinity,
color: Colors.yellow,
child: Text('1', style: TextStyle(color: Colors.black)),
),
Spacer(),
Container(
height: 100,
width: double.infinity,
color: Colors.red,
child: Text('2', style: TextStyle(color: Colors.black)),
),
],
),
),
),
);
}
}
Try using SizedBox(height:50.0) // or any other value in b/w Logo widget and Align(bottom part).
return ListView(
children: <Widget>[
Logo(LogoColor.dummy_black),
SizedBox(height: MediaQuery.of(context).size.height/ 3),// you will get value which is 1/3rd part of height of your device screen
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(20),
child: BottomPart(),
),
),
],
);
Finally I found out soln to this problem. Use Code :`
Align(
alignment: Alignment.bottomCenter,
child: ListView(
shrinkWrap: true,
children: <Widget>[
// Your Widget Here
],
),
),
you can insert this between logo and Align
Expanded(child: SizedBox(height: 8)),
You could take out the bottom part from ListView, and put it in the last of Stack's children. Your Wrapper could look like:
Widget build(BuildContext context){
var bottomHeight = 120.0;//replaced with your BottomPart's height
return Stack(
children: [
ListView(),//your ListView
Positioned(
top: MediaQuery.of(context).size.height - bottomHeight,
child: SizedBox(
height: bottomHeight,
child: BottomPart(),
)
)
],
);
}
I'm still having a bit of trouble with the layouting in Flutter.
Right now I want to have the available space shared between 3 widgets, in a quadrant layout.
The width is evenly shared (this works fine via 2 Expanded widgets in a Row), but now I also want the height to adjust automatically so widget3.height == widget1.height + widget2.height.
If the content of widget3 is larger, I want widget1 and widget2 to adjust their height and vice versa.
Is this even possible in Flutter?
Have a look at IntrinsicHeight; wrapping the root Row should provide the effect you're looking for:
import 'package:flutter/material.dart';
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(
appBar: AppBar(title: Text('Rows & Columns')),
body: RowsAndColumns(),
),
);
}
}
class RowsAndColumns extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 100.0),
child: IntrinsicHeight(
child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Expanded(
child: Column(children: [
Container(height: 120.0, color: Colors.yellow),
Container(height: 100.0, color: Colors.cyan),
]),
),
Expanded(child: Container(color: Colors.amber)),
]),
),
);
}
}
Adjusting the heights in the containers in the column cause the container on the right to resize to match:
https://gist.github.com/mjohnsullivan/c5b661d7b3b4ca00599e8ef87ff6ac61
I think that you can set the height of the row instead, then you only must to set the height of you column containers, and with the crossAxisAlignment: CrossAxisAlignment.stretch the second row will be expand occupying his parent height:
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Column(
children: [
Expanded(
// If you don't have the height you can expanded with flex
flex: 1,
child: Container(
height: 50,
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Container(
height: 50,
color: Colors.red,
),
)
],
),
),
Expanded(
child: Container(
color: Colors.yellow,
),
)
],
)
Since IntrinsicHeight is considered relatively expensive, it's better to avoid it. You can use Table with verticalAlignment: TableCellVerticalAlignment.fill in the largest TableCell.
Please note that if you use .fill in all cells, the TableRow will have zero height.
Table(children: [
TableRow(children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.center,
color: Colors.blue,
child: Text('Widget 1'),
),
Container(
alignment: Alignment.center,
color: Colors.green,
child: Text('Widget 2'),
),
],
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: Container(
alignment: Alignment.center,
color: Colors.orange,
child: Text('Widget 3'),
)),
]),
]),
I'm new to flutter. Please correct me if I'm doing something wrong here. I think It can also be achieved using setState((){}) without using IntrinsicHeight.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
double h1 = 100;
double h2 = 200;
double h3;
setState(() {
h3 = h1 + h2;
});
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 100.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
children: [
Container(
color: Colors.green,
height: h1,
),
Container(
color: Colors.orange,
height: h2,
)
],
),
),
Expanded(
child: Container(
color: Colors.yellow,
height: h3,
),
)
],
),
),
),
),
);
}
}
Find image here
Code can also be found here: https://gist.github.com/Amrit0786/9d228017c2df6cf277fbbaa4a6b20e83
if you have used the expanded inside Row and facing for full height issue then just wrap the expanded child with Align widget.