I'm building a ListItem and I want the text to be in a cardview that takes up the entire width and just enough height as the text size is. This is my code
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Align(
child: Container(
width: double.infinity,
height: 200.0,
color: Colors.pinkAccent,
),
),
Container(
width: double.infinity,
color: Colors.deepPurpleAccent,
child: Align(
alignment: Alignment.bottomCenter,
child: Card(
child: Text(
'some text',
textAlign: TextAlign.center,
),
)),
)
],
);
}
There are two widgets inside the stack, I want the second widget to lap above the first widget but just for a small part. Yet as you can see, the align of the second widget isn't at the bottom but at the top. I also tried switching Container and Align as child of each other but to no avail. Here's a screenshot of the resulting code
There is nothing like "BottomCenter" (with capital B). You should use Alignment.bottomCenter. But you probably need to set alignment for Stack.
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
width: double.infinity,
height: 200.0,
color: Colors.pinkAccent,
),
Container(
width: double.infinity,
color: Colors.deepPurpleAccent,
child: Card(
child: Text(
'some text',
textAlign: TextAlign.center,
),
),
)
],
)
Related
In my layout I have two Widgets in a row, a text and a button.
How can I achieve something like below, where only the Text is centered, and the icon is simply next to it?
---------------------------
Text *
---------------------------
Using Row would center all the contents and would output something like
---------------------------
Text *
---------------------------
Tried: Row(children:[widget1, widget2], mainAxisAlignment: MainAxisAlignment.center);
But this centers both items, causing the text to look off-centered.
You can use CompositedTransformTarget and CompositedTransformFollower as mentioned on comment section by pskink.
class AppPT extends StatelessWidget {
const AppPT({super.key});
#override
Widget build(BuildContext context) {
final LayerLink _layerLink = LayerLink();
return Scaffold(
body: Column(
children: [
Stack(
children: [
Align(
child: CompositedTransformTarget(
link: _layerLink,
child: Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
),
),
CompositedTransformFollower(
link: _layerLink,
targetAnchor: Alignment.centerRight,
followerAnchor: Alignment.centerLeft,
child: Container(
color: Colors.cyanAccent,
width: 12,
height: 12,
alignment: Alignment.center,
child: Text("*"),
),
),
],
)
],
),
);
}
}
There are few tricks I can think of,
You can use Stack widget with Position.
including another widget on right by applying opacity(invisible) on current snippet.
using transform will be handle if you know the width of the widget.
Transform.translate(
offset: Offset(20 / 2, 0), //20 is the * box size
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
Container(
color: Colors.green,
width: 20,
height: 20,
child: Center(child: Text("*")),
),
],
),
),
Place text and second widget inside row then put the row inside container with alignment center and use SizedBox for spacing between widget instead of Padding Widget.
Container(
color: Colors.green,
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text("Text"),
SizedBox(width: 10),
Text("*"),
],
),
);
This is my first question and I'm new in Flutter. I searched a lot but I did not find any suitable answers.
Flutter: I need to set my box height flexible to fit any size of screen. I also need to fit my last box to the right side of screen to fit any screen. I also mentioned my problem in the image of screen. Kindly help. I'm adding my code here.
Output and requirement of my code
void main() {
runApp(const Challange2());
}
class Challange2 extends StatelessWidget {
const Challange2({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueGrey,
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 850.0,
width: 100.0,
color: Colors.amberAccent,
child: Text(
'This box height should be flexible according to screen size',
style: TextStyle(color: Colors.black, fontSize: 25),
),
),
const SizedBox(
width: 65,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100.0,
width: 100.0,
color: Colors.deepPurpleAccent,
child: Text(
'Text2',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
Container(
height: 100.0,
width: 100.0,
color: Colors.deepOrangeAccent,
//Flexible(
child: Text(
'Text3',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
//),
],
),
const SizedBox(
width: 65,
),
Container(
height: 850.0,
width: 100.0,
color: Colors.blue,
child: Text(
'This box need to be right alignment and height should be flexible according to screen size',
style: TextStyle(color: Colors.black, fontSize: 25),
),
// child: const Align(
// alignment: Alignment.topCenter,
),
],
),
),
),
//),
//return Container();
);
}
}
To adapt to screen height, you can set height of containers to double.infinity,
To keep rigth container aligned to the right, use expanded in the center row child, in order to make this widget grow or shrink as needed.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(children: [
Container(
width: 100,
height: double.infinity,
color: Colors.red,
child: Text(
'This box height should be flexible according to screen size'),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 50,
height: 50,
color: Colors.green,
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
),
]),
),
Container(width: 100,
height: double.infinity,
color: Colors.blue, child:Text("Right Panel"),),
]),
);
}
}
LayoutBuilder() Provides a way to get the actual screen size dynamically and allows you to calculate relative sizes: Youtube - Flutter: LayoutBuidler
Generally when using Rows and Columns you can use Expanded widgets to have relative instead of absolute sizes:
Row(
children: [
Expanded(flex: 1, child: Container()), // This will take up 1 third of the screen
Expanded(flex: 2, child: Container()), // This will take up 2 thirds of the screen
]
),
Expanded(flex: 1, child: Container()),
Expanded(flex: 1, child: Container()),
I'm building an AR app with Flutter and using the ar_flutter_plugin.
The position of the AR widget seems to be fixed to the top left and it doesn't move anywhere else. Whatever the other widgets in the tree, doesn't change anything. It's always at top left corner (see image).
It works with a dummy widget just fine (compare second img).
Child Ar widget
Widget build(BuildContext context) {
return SizedBox(
width: widget.width,
height: widget.height,
child: Column(
children: [
Expanded(
child: Column(children: [
Expanded(
child: ARView(
onARViewCreated: onARViewCreated,
planeDetectionConfig:
PlaneDetectionConfig.horizontalAndVertical,
),
),
Align(
alignment: Alignment(1, 1),
child: FloatingActionButton(onPressed: takePicture))
]),
),
],
));
}
Parent Widget
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
key: scaffoldKey,
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: [
Container(
width: 350,
height: 350,
child: ObjectsOnPlanesWidget(
// child: custom_widgets.ArPlaceholder(
width: double.infinity,
height: double.infinity,
modelUrl: widget.modelUrl,
),
),
Align(
alignment: AlignmentDirectional(-0.23, -0.92),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(8, 24, 8, 24),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color:
FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(12),
),
child: InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Icon(
Icons.chevron_left,
color: Colors.black,
size: 24,
),
),
),
Text(
'Try On',
style: FlutterFlowTheme.of(context).bodyText1,
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color:
FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.share_outlined,
color: Colors.black,
size: 24,
),
),
],
),
),
),
Align(
alignment: AlignmentDirectional(0, 0.95),
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.photo_camera,
color: Colors.black,
size: 24,
),
),
),
],
),
),
),
);
}
I want to put the camera in the background and put other widgets (such as photo-taking-button) on top of it.
How do I reposition it into a container? At least under the App Bar?
Logically this should have worked, what i would suggest you try would be to first have a SafeArea widget.
SafeArea(
child: build(buildContext),
),
I had a similar issue in the past and using this solved it.
Also, there seems to be an open issue which seems related to this with the following possible solution :
With Flutter 2.10.5. it works without problems. This seems to be a Flutter 3 problem.
The way platforms views are rendered was changed in the 3.0 release.
probably same issue:
flutter/flutter#106246
explained here:
flutter/flutter#103630
I hope this will be fixed in new Flutter 3 releases soon.
And also this
I try the master channel Flutter v3.1.0-0.0.pre.1372 and the issue is fixed there.
Fixed will come to a stable channel soon with Flutter v3.1.0.
Also, I am not sure why are you using SizedBox as your parent widget.
Why not try a basic Container instead?
Good luck, Let me know if I can help with anything else
I have a listview which is equally divided into two parts(act as a background) How can i put a view above it( 100*100 w*h )?(This box should center align & top of root)
here is my tried code -
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Container(
width: ((context.findRenderObject() as RenderBox).size.width),
height: ((context.findRenderObject() as RenderBox).size.height)/2,
color: darkGreen,
),
// SizedBox(width: 10,),
Container(
width: ((context.findRenderObject() as RenderBox).size.width),
height: ((context.findRenderObject() as RenderBox).size.height)/2,
color: Colors.grey,
),
],
),
);
}
}
First of all, you don't need this line:
((context.findRenderObject() as RenderBox).size.width)
you can replace it with:
double.infinity
and it will take the maximum width the parent Widget can allow.
as for your question, you can wrap your ListView in a Stack:
Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: <Widget>[
ListView(
children: <Widget>[
Container(
width: double.infinity,
height:
((context.findRenderObject() as RenderBox).size.height) / 2,
color: darkGreen,
),
// SizedBox(width: 10,),
Container(
width: double.infinity,
height:
((context.findRenderObject() as RenderBox).size.height) / 2,
color: Colors.grey,
),
],
),
//place your desired widget here
],
),
),
I have a Row containing a small image followed by a Text. I'm trying to set a fix space between those 2 widgets (for the moment they are stuck one after the other). That should be something simple but I don't know a nice way to do it...
Here is my code:
Widget displayRow(String imageName, String text, TextStyle textStyle) {
Widget widget = Container(
margin: const EdgeInsets.symmetric(vertical: 8.0),
color: Colors.green,
child: Row (
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image.asset(
"images/${imageName}",
width: 32.0,
height: 32.0,
alignment: Alignment.center,
fit: BoxFit.scaleDown
),
Text(text, style: textStyle),
],
),
height: 120.0,
);
return widget;
}
I have put this code in a function because I intend to use it several times to display different rows all on the same pattern (an image + a text).
Thanks for the help
You can use a Container with a relatively small width:
Widget displayRow(String imageName, String text, TextStyle textStyle) {
Widget widget = Container(
margin: const EdgeInsets.symmetric(vertical: 8.0),
color: Colors.green,
child: Row (
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image.asset(
"images/${imageName}",
width: 32.0,
height: 32.0,
alignment: Alignment.center,
fit: BoxFit.scaleDown
),
Container(width: 10.0), // You can adjust it to suit your design
Text(text, style: textStyle),
],
),
height: 120.0,
);
return widget;
}
You can also opt for wrapping the Image widget inside a Container and giving it a certain padding :
Container(
padding: EdgeInsets.all(15.0),
child: Image.asset(
"images/${imageName}",
width: 32.0,
height: 32.0,
alignment: Alignment.center,
fit: BoxFit.scaleDown
),
),