I simply would like to have a couple of Containers inside a Column but somehow I can not align them correctly... This is my setup:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ShimmerContainer(
height: 50,
width: 200,
),
ShimmerContainer(
height: 50,
width: 200,
),
ShimmerContainer(
height: 50,
width: 200,
)
],
),
And somehow my Containers are all aligned in the center. The really weird thing is that if I wrap one of these ShimmerContainers inside a Align with Alignment.centerLeft all other containers are also aligning left. I have no idea why this happens.
This is my ShimmerContainer:
class ShimmerContainer extends StatelessWidget {
final double? height;
final double? width;
final double borderRadius;
const ShimmerContainer({
this.height,
this.width,
this.borderRadius = 0,
});
#override
Widget build(BuildContext context) {
return Shimmer.fromColors(
baseColor: Colors.grey[200]!,
highlightColor: Colors.white,
child: Container(
height: height != null ? height!.scaled : null,
width: width != null ? width!.scaled : null,
decoration: BoxDecoration(
color: white,
borderRadius: BorderRadius.circular(
borderRadius,
),
),
),
);
}
}
Ouput of your code
I added background color to view properly.
I think you should use flutter clean and run again. Else error is happening from parent side.Does it solve your issue?
Related
I am using dhiwise to convert my figma prototype into flutter but the header is not appearing and is somehow above the screen. I tried moving it elsewhere but it just puts it outside the header.
current look
what it is supposed to look like
return SafeArea(
child: Scaffold(
backgroundColor: ColorConstant.whiteA700,
body: Container(
height: size.height,
width: size.width,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: SingleChildScrollView(
child: Container(
height: size.height,
width: size.width,
child: Stack(
alignment: Alignment.topRight,
children: [
Align(
alignment: Alignment.center,
child: Container(
height: size.height,
width: size.width,
decoration: BoxDecoration(
color: ColorConstant.whiteA700,
),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: size.width,
padding: getPadding(
left: 11,
top: 7,
right: 11,
bottom: 7,
),
decoration: BoxDecoration(
color: ColorConstant.blue200,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
CustomIconButton(
height: 53,
width: 53,
margin: getMargin(
bottom: 276,
),
child: CustomImageView(
svgPath: ImageConstant.imgUser,
the custom image view code, this code was directly from the website itself and I have no idea what any of the code means to do
// ignore_for_file: must_be_immutable
import 'dart:io';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class CustomImageView extends StatelessWidget {
///[url] is required parameter for fetching network image
String? url;
///[imagePath] is required parameter for showing png,jpg,etc image
String? imagePath;
///[svgPath] is required parameter for showing svg image
String? svgPath;
///[file] is required parameter for fetching image file
File? file;
double? height;
double? width;
Color? color;
BoxFit? fit;
final String placeHolder;
Alignment? alignment;
VoidCallback? onTap;
EdgeInsetsGeometry? margin;
BorderRadius? radius;
BoxBorder? border;
///a [CustomImageView] it can be used for showing any type of images
/// it will shows the placeholder image if image is not found on network image
CustomImageView({
this.url,
this.imagePath,
this.svgPath,
this.file,
this.height,
this.width,
this.color,
this.fit,
this.alignment,
this.onTap,
this.radius,
this.margin,
this.border,
this.placeHolder = 'assets/images/image_not_found.png',
});
#override
Widget build(BuildContext context) {
return alignment != null
? Align(
alignment: alignment!,
child: _buildWidget(),
)
: _buildWidget();
}
Widget _buildWidget() {
return Padding(
padding: margin ?? EdgeInsets.zero,
child: InkWell(
onTap: onTap,
child: _buildCircleImage(),
),
);
}
///build the image with border radius
_buildCircleImage() {
if(radius!=null) {
return ClipRRect(
borderRadius: radius,
child: _buildImageWithBorder(),
);
}
else{
return _buildImageWithBorder();
}
}
///build the image with border and border radius style
_buildImageWithBorder(){
if(border!=null) {
return Container(
decoration: BoxDecoration(
border: border,
borderRadius: radius,
),
child: _buildImageView(),
);
}else{
return _buildImageView();
}
}
Widget _buildImageView() {
if (svgPath != null && svgPath!.isNotEmpty) {
return Container(
height: height,
width: width,
child: SvgPicture.asset(
svgPath!,
height: height,
width: width,
fit: fit ?? BoxFit.contain,
color: color,
),
);
} else if (file != null && file!.path.isNotEmpty) {
return Image.file(
file!,
height: height,
width: width,
fit: fit ?? BoxFit.cover,
color: color,
);
} else if (url != null && url!.isNotEmpty) {
return CachedNetworkImage(
height: height,
width: width,
fit: fit,
imageUrl: url!,
color: color,
placeholder: (context, url) => Container(
height: 30,
width: 30,
child: LinearProgressIndicator(
color: Colors.grey.shade200,
backgroundColor: Colors.grey.shade100,
),
),
errorWidget: (context, url, error) => Image.asset(
placeHolder,
height: height,
width: width,
fit: fit ?? BoxFit.cover,
),
);
} else if (imagePath != null && imagePath!.isNotEmpty) {
return Image.asset(
imagePath!,
height: height,
width: width,
fit: fit ?? BoxFit.cover,
color: color,
);
}
return SizedBox();
}
}
1- flutter clean
2- flutter pub get
And if it doesn't work with these instructions, I suggest you look at the link below
enter link description here
I hope you specified that image as an asset in the pubspec.yaml.
I mean...
Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.
flutter:
assets:
- assets/my_icon.png
- assets/background.png
To include all assets under a directory, specify the directory name with the / character at the end:
flutter:
assets:
- directory/
- directory/subdirectory/
If you already specify path of your image (sometimes you need to hot restart if you add new asset)
please check that svg image was fine by opening it via web. I face the same issues before with svg using SvgPicture I can open svg file on web but not readble in mobile apps. As I remember my error was not valid svg.
This library only supports <defs> and xlink:href references that are defined ahead of their references.
If do so, maybe you can try this one.
save image as PNG from Figma
Import image to Adobe XD
Export to SVG.
Replace current asset with this Adobe XD svg format.
I have to build the following widget, which will be placed inside a ListView as parent element.
I have a problem with the green rectangle on the left side.
Basically I have structured my widget like that:
-> Card
-> Stack
-> Container for the "right" side (Tire ID, icon, temperature, pressure info)
-> Container for green rectangle,
-> Container with boxed decoration for green circle
-> Text with "5LO"
But this is how it looks like right now:
Basically the Container for the rectangle on the left side is not stretching it's height to full height of the parent stack. How can I do this?
Code:
class TireListItem extends StatelessWidget {
static const _circleSize = 36.0;
const TireListItem({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.zero,
key: Key('cardTire'),
child: Stack(
alignment: AlignmentDirectional.centerStart,
children: [
_TireContentInfoWidget(),
_buildTireIndicationRectangle(), // This should build the rectangle on the left side.
_buildTirePositionCircle(),
_buildTirePositionTextView(context)
],
));
}
Widget _buildTireIndicationRectangle() {
return Container(
width: _marginLeft,
decoration: BoxDecoration(
color: AppColor.green,
shape: BoxShape.rectangle,
borderRadius: BorderRadiusDirectional.horizontal(
start: Radius.circular(Dimens.cardCornerRadius))),
);
}
Container _buildTirePositionCircle() {
return Container(
width: _circleSize,
height: _circleSize,
decoration: BoxDecoration(color: AppColor.green, shape: BoxShape.circle),
);
}
Container _buildTirePositionTextView(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: Dimens.spacingXs),
child: Text(
"2RO",
style:
Theme.of(context).textTheme.button.apply(color: AppColor.white),
));
}
}
If I set a fixed height to the rectangle container, it would basically work out, but I want that the text information area is defining the full height of the widget:
Widget _buildTireIndicationRectangle() {
return Container(
width: _marginLeft,
height: 150,
decoration: BoxDecoration(
color: AppColor.green,
shape: BoxShape.rectangle,
borderRadius: BorderRadiusDirectional.horizontal(
start: Radius.circular(Dimens.cardCornerRadius))),
);
}
You can solve this problem by using IntrinsicHeight class. If you wrapping Stack with InstrinctHeight, Stack's height is fixed by parent's height. Please look IntrinsicHeight document.
https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.zero,
key: Key('cardTire'),
child: IntrinsicHeight(child: Stack(
alignment: AlignmentDirectional.centerStart,
children: [
_TireContentInfoWidget(),
_buildTireIndicationRectangle(), // This should build the rectangle on the left side.
_buildTirePositionCircle(),
_buildTirePositionTextView(context)
],
),
),
);
}
Container height is set to fixed 40 but once I'm using that Widget in AppBar() it takes all the possible height. Here is the code for my custom widget which has Fixed height of Container,
class LPBorderButtonWithIcon extends StatelessWidget {
final GestureTapCallback onPressed;
final String text;
final String iconAsset;
final Color textColor;
LPBorderButtonWithIcon(
{#required this.onPressed,
#required this.text,
#required this.textColor,
#required this.iconAsset});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Color(0XFFd8dce1))),
child: Row(
children: [
WidthSizedBox(15),
Image.asset(
iconAsset,
height: 14,
width: 14,
),
WidthSizedBox(5),
Text(text,
style: TextStyle(
color: textColor,
fontSize: 12,
fontFamily: "GilroyMedium")),
WidthSizedBox(15),
],
),
));
}
}
and here I'm using LPBorderButtonWithIcon() in this screen,
class CreateRulesScreen extends StatefulWidget {
#override
_CreateRulesScreenState createState() => _CreateRulesScreenState();
}
class _CreateRulesScreenState extends State<CreateRulesScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
elevation: 1,
centerTitle: false,
titleSpacing: 0.0,
leading: BackButton(
color: LPColor.primary,
onPressed: () {
Navigator.of(context).pop();
},
),
title: Text(
"Create Rule",
style: LPStyle.titleStyle,
),
actions: [
Container(
margin: EdgeInsets.only(top: 12, bottom: 12, right: 16),
child: LPBorderButtonWithIcon(
onPressed: null,
text: "Create",
textColor: Color(0XFF508ff4),
iconAsset: "images/ic_publish.png",
),
)
],
),
);
}
}
and below is the result where that custom container takes all the possible height. Please let me know how can I set fixed height to my custom widget.
Place your Container inside an Align, Aling will force the container to occupy only the space it needs.
Align(
child: Container(
height: 20,
width: 30,
color: Colors.white,
),
)
The parent widget takes the entire space available to draw the widget, Here Container is the parent widget, and it's taking whatever space is available, so to give height to the Container, that needed to be placed inside any widget which assigns x,y position of widgets to get it to draw.
Container(
height: 40, // Its not going to apply height as it's parent widget
)
So to work out the above code you have to align Container to any other widget like Center, Align, etc.
For Eg:
Scaffold(
body: Container(
height: 600,
color: Colors.red,
child: Container(
height: 200,
color: Colors.yellow,
),
),
);
The above example child container will not draw yellow color in 200 height, it will take the entire 600 height space.
Output:
To Solve this we have assigned some widgets to the child Container so that it will get the x, y position to start drawing the child widget. Here Center widget is used.
Eg:
Scaffold(
body: Container(
height: 600,
color: Colors.red,
child: Center(
child: Container(
height: 200,
color: Colors.yellow,
),
),
),
);
Output:
Some Limitation:
A widget can decide its own size only within the constraints given to
it by its parent. This means a widget usually can’t have any size it
wants.
A widget can’t know and doesn’t decide its own position in the
screen, since it’s the widget’s parent who decides the position of
the widget.
Since the parent’s size and position, in its turn, also depends on
its own parent, it’s impossible to precisely define the size and
position of any widget without taking into consideration the tree as
a whole.
If a child wants a different size from its parent and the parent
doesn’t have enough information to align it, then the child’s size
might be ignored. Be specific when defining alignment.
Reference link: https://flutter.dev/docs/development/ui/layout/constraints
I'm trying to make a custom drop-down menu in Flutter that is just a simple button that on tap shows a scrollable row of products. I've attached some images that better show what I'm referring to. I tried to use an IconButton and an AnimatedContainer but I can't seem to get it working. I was hoping someone would have a better idea on how to do something like this.
Here is my code so far by the way:
class ModelsDropdown extends StatefulWidget {
final List<Phone> phones;
ModelsDropdown({#required this.phones});
#override
_ModelsDropdownState createState() => _ModelsDropdownState();
}
class _ModelsDropdownState extends State<ModelsDropdown> {
bool _droppedDown;
#override
void initState() {
_droppedDown = false;
super.initState();
}
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
border: Border.all(width: 2.0)
),
width: 32.0,
height: 32.0,
child: Column(
children: [
IconButton(
padding: const EdgeInsets.only(right: 0.0),
icon: Icon(
_droppedDown ? Icons.expand_more : Icons.expand_less
),
color: Colors.black,
onPressed: () {
setState(() {
_droppedDown = !_droppedDown;
});
}
),
_droppedDown ?
Container(
width: MediaQuery.of(context).size.width,
height: 300.0,
color: Colors.orangeAccent,
) :
SizedBox.shrink()
],
),
);
}
}
With the container at the bottom, it doesn't even work. I get an overflow error. Any help is very much appreciated. Thanks a lot, everyone.
I Think you should Change The Below Container with an AnimatedCrossFade.
Animated Cross Fade Has Two Child First and Second ...
https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html
Dont set Height for Your Child ... its Works Perfectly...
AnimatedCrossFade(
duration: const Duration(seconds: 3),
firstChild: Container(), // When you don't want to show menu..
secondChild: menu,
crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)
with this method you don't need Animated Container at top ... remove that.(return Column)...
with Animated cross Fade You don't need to Know The Height of widget and its for works dynamic Heights
-------------- if You Want to use Your Code and Use Fixed Height ----------------
width: _droppedDown ? YourWidth : 32.0,
height: _droppedDown ? 300 : 32.0,
I have created a container in which two AnimatedContainers are located. When i press the down button i would like the TextFieldContainer (The content with the white TextField in the middle) to disappear by decreasing it size to 0. Simountanesly i want to make the ToolbarContainer appear by increasing its size. So far this is what i get:
It looks like only one of the AnimatedContainers can animate its properties one at a time, which creates the werid behaviour as shown, where one of the AnimatedContainers animate quickly, then slowly and then quickly once again.
How do i make the animation smooth so the overall size of the main container does not change because the two AnimatedContainers animate their size equally quick and simountanesly?
Here is the code for the main container:
class _MessageToolbarContainerState extends State<MessageToolbarContainer> {
bool toggleToolbar = false;
#override
Widget build(BuildContext context) {
return Container(
width: widget.availableWidth - 75,
margin: EdgeInsets.only(bottom: 25.0),
constraints: BoxConstraints(minHeight: 50.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: Border.all(
color: Colors.grey,
width: 2.0,
),
),
child: Material(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
elevation: 5.0,
clipBehavior: Clip.antiAlias,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
AnimatedContainer(
duration: Duration(seconds: 1),
constraints: BoxConstraints(
minHeight: toggleToolbar ? 0.0 : 50.0,
maxHeight: toggleToolbar ? 0.0 : 100.0,
),
child: IntrinsicHeight(
child: TextFieldContent(
onDownPressed: () {
setState(() {
toggleToolbar = !toggleToolbar;
print(toggleToolbar);
});
},
),
),
),
AnimatedContainer(
duration: Duration(seconds: 1),
constraints: BoxConstraints(
minHeight: !toggleToolbar ? 0.0 : 50.0,
maxHeight: !toggleToolbar ? 0.0 : 100.0,
),
child: IntrinsicHeight(
child: ToolbarContent(
onUpPressed: () {
setState(() {
toggleToolbar = !toggleToolbar;
print(toggleToolbar);
});
},
),
),
),
],
),
),
);
}
}
EDIT:
I have boiled the problem down to one widget. I have wraped my AnimatedContainers in two IntrinsicHeight widgets to keep their content from expanding to much. If i remove the IntrinsicHeight widgets i get the following output:
As it is clearly shown the AnimatedContainers now animate smoothly. Sadly that does not fix my problem. I added the IntrinsicHeight widgets to make the content expand as the user typed in the TextField. If i remove the IntrinsicHeight widgets the content of the AnimatedContainers are not displayed properly.
The original question still stands. How do I make the 2 AnimatedContainers animate properly when they are wrapped in an IntrinsicHeight widget?