When moving the camera, the BodyComponents gets rendered off the game area, do you know why or is it a bug?
Flutter:
child: Scaffold(
body: SafeArea(
child: Column(
children: [
const Text("data"),
Container(
color: Colors.blue,
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 300,
height: 600,
child: Stack(
children: [
GameWidget<BallsSampleForge2DGame>(
game: BallsSampleForge2DGame(),
Flame:
camera.moveTo(<some vector>)
The GameWidget is not clipped by default.
You can either use a FixedResolutionViewport which automatically clips the canvas, or you can wrap the GameWidget in Flutter's ClipRect widget.
https://api.flutter.dev/flutter/widgets/ClipRect-class.html
Related
I am writing an application, the main screen of which will consist of two images – a poster and a panel with buttons at the bottom. I already made the bottom image overlap the top one by 10 pixels. To scale it, I use the fit property: BoxFit.fitWidth. Tell me, please, is it possible to make the widget fit only the upper left corner of the image and at the same time be able to scale?
It should be
how it shouldn't be
Home screen now
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
//Poster Section
Align(
alignment: Alignment.topCenter,
child: Container(
width: constraints.maxWidth,
height: constraints.maxHeight * .92,
//color: Colors.blue,
child: Image.asset(
fit: BoxFit.fill, "images/Captain Clark.png"),
),
),
//Bottom bar section with buttons
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: constraints.maxWidth,
height: constraints.maxHeight * .08 + 8,
child: Stack(
fit: StackFit.expand,
alignment: Alignment.centerLeft,
children: [
//Panel background
Image.asset(fit: BoxFit.fitWidth, "images/Fon1-1.png"),
//Row with buttons
Row(
My first question is how to set image in bottom right corner, and the answer is
Align(
alignment: Alignment.bottomRight,
child: (Image(image: AssetImage("images/bg_decore_up_la.png"),)),
),
It is working fine,
But in parent Scaffold I set
resizeToAvoidBottomInset: true,
means scroll is happening when keyboard is appear.
For this ,
This Align (image) widget i set out of SingleChildScrollView
Now my whole code like
Scaffold(
resizeToAvoidBottomInset: true,
appBar:AppBar(),
body:SafeArea(
child:Stack(
children:[
Align(
alignment: Alignment.bottomRight,
child: (Image(image: AssetImage("images/bg_decore_up_la.png"),)),
),//want to fixed widget when keyboard will appear
ScrollConfiguration(
behavior: MyBehavior(),
child: SingleChildScrollView(
//scrolling widget list
)
)
]
)
)
);
If i set
Align(
alignment: Alignment.topRight,
child: Container(
margin: EdgeInsets.only(top: 60),
child: (
Image(
image: AssetImage("images/bg_decore_bottom_la.png"),)),
),
this code fixed the issue,
but for this i need proper top margin
topMargin=totalScreenHeight-ImageWidth;
Use a Stack and Positionned widget like so
Stack(
children: const <Widget>[
Positioned(
bottom: 0,
right:0,
child: (Image(
image: AssetImage("images/bg_decore_up_la.png"),
)),
)
],
),
In my app I have a bottomBar which is placed at the bottom right above the SafeArea:
The problem is that I would like to have a white Container at the bottom (red arrow in image) so that for bigger iPhones (where the bottom of the screen IS NOT EQUAL to the safeArea) the empty place in the image if filled white.
For phones where the bottom screen is equal to the safeArea the fillContainerHeight should simply be nil/zero.
This is my setup:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
// mainAxisSize: MainAxisSize.max,
children: [
SafeArea(
child: Row(
children: [
Expanded(
child: Container(
height: 49,
color: Colors.white,
)),
Container(
height: 49,
child: Image.asset('assets/images/bottomBar.png')),
Expanded(
child: Container(
height: 49,
color: Colors.white,
)),
],
),
),
Container(color: Colors.white) // -> fill container
],
)
Right now the container is not being shown. What is the best way to solve my problem here? I couldn't find anything on this. Let me know if you need any more info!
You could try to use the stack widget like this (the second child (align widget) is positioned above your SafeArea widget):
return Stack(
children: [
SafeArea(
child: Scaffold(
appBar: AppBar(),
body: // Your other widgets here
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white,
height: MediaQuery.of(context).padding.bottom;,
),
)
],
);
Another option would be to wrap your SafeArea in a Container and give it a white background while setting the top property to false (= meaning the SafeArea will not be applied to the top):
return Container(
color: Colors.white,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(),
body: // Your other widgets here
),
),
);
IgnorePointer(
child: cProtractor & darkModeOn
? Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Center(
child:
Image.asset('lib/assets/img/cprot2white.png',
width: 500.0, height: 500.0),
)))
: SizedBox())
]));
}
}
The above function switches on and off a protractor overlay for my Google Map. Its parent is a body: Stack(children: [. Is there any way to fix this or get rid of the error? The function is working.
You have to remove Ignore pointer as parent widget of Positioned Widget as Positioned widgets are placed directly inside Stack widgets.
You can achieve the same using below code
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: IgnorePointer(
child: Center(
child: Image.asset('lib/assets/img/cprot2white.png',
width: 500.0, height: 500.0),
),
))),
Here just the hierarchy of the widgets are changed
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 100.00,
height: 100.00,
color: Colors.red,
),
])),
));
Currently, the height is 100.00, but I need to stretch it to infinity.
I tried to change the height to double.infinity:
Container(
width: 100.00,
height: double.infinity,
color: Colors.red,
But then I receive the following error:
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
To achieve this, you can either:
1) Use a widget called Expanded widget.
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
])),
));
2) Give the Container a height and width of the device screen using the MediaQuery class
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
// give it a width equals to the device screen
width: MediaQuery.of(context).size.width,
// give it a height equals to the device screen
height: MediaQuery.of(context).size.height,
color: Colors.red,
),
])),
));
Wrap your Container with an Expanded-Widget and remove the height completely.
Expanded(
child: Container(
width: 100.00,
color: Colors.red,
),
),
The Expanded-Widget fills the available space of the child of a Row or a Column along the main-axis.
The right way to assign height to is the calculating height of
App Bar
Top Bar Space(Exist on the above App Bar)
Remaining screen
Logic:
1. Get the MediaQuer
final mediaQuery = MediaQuery.of(context);
2. Declare the AppBar Widget and same App Bar instance should be used in Scaffold App Bar
final PreferredSizeWidget appBar = AppBar(
title: Text('Home'),
);
3. Use calculated height
Container(
width: mediaQuery.size.width,
height: (mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top),
color: Colors.red,
),