How can I create a semi-transparent background with the transparent hole inside? I tried to use decoration and foreground decorations with different blend modes, stack, ClipRect, colorfilters, but nothing works. I will appreciate any ideas. Thanks!
The "easiest" way I've found to do it is using a ColorFiltered Widget with a Stack.
The following code will create exactly what you need:
#override
Widget build(BuildContext context) {
return Material(
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
fit: BoxFit.cover,
),
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: const EdgeInsets.only(top: 80),
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(100),
),
),
),
Center(
child: Text(
'Hello World',
style: TextStyle(fontSize: 70, fontWeight: FontWeight.w600),
),
)
],
),
),
],
),
);
}
This one you not only create "holes" over views, it works with anything! including texts, etc.
Final result:
Related
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 figured I can draw ripple over an image by enclosing the image in Ink(decoration: BoxDecoration(image: ...)), but how can I do the same for Text?
This is supposed to be a card with an image on top and a title and some other information at the bottom:
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final post = _postModel.post;
return Material(
color: theme.colorScheme.background,
child: InkWell(
onTap: () {},
splashColor: Colors.red,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (post.imageUri != null)
// This image IS covered by the ripple (what I need)
AspectRatio(
aspectRatio: 5 / 3,
child: Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3),
image: DecorationImage(
image: NetworkImage('https://picsum.photos/700'),
fit: BoxFit.cover,
),
),
),
),
// This must be underneath the ripple, but isn't.
Text(post.title, style: theme.textTheme.headline5),
Container(
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 5),
color: Colors.transparent,
height: 60,
child: Row(
children: <Widget>[
// This is also covered by the ripple
Ink(
height: 35,
width: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://picsum.photos/100'),
),
),
),
SizedBox(width: 5),
// This must be underneath the ripple but isn't
Ink(
// decoration: Decoration,
child: Text(
post.author,
style: theme.textTheme.caption,
),
),
Spacer(),
],
),
),
],
),
),
),
);
}
When I press, the ripple covers both images as expected, however, I can't figure out how to make the ripple cover the text widgets as well. I tried wrapping the text in an Ink widget (the last one), but it doesn't work - the text is still displayed over the ripple.
Unpressed:
Pressed (the text is visible):
I am new in flutter. I want to make the transparent Circle in side the semi transparent rectangle. Look like below,
I have not idea about that. So please help me to make this type of widget in flutter.
Using ColorFiltered and Stack you can achieve this.
(I took the answer mentioned in the comment and edited to your needs)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://lh3.googleusercontent.com/proxy/_wrP_GRGOkGw0FLMiR3qeMzlyC-qN8Dd4sND89_xxLZMDIZh204g8PCccS-o9WaL1RKyiVOLGVS9QpodSkMMhOh8kbNh1CY492197-im-4vlFRRdsVqT2g4QbRlNgljDIg',
fit: BoxFit.cover,
), //Give your Image here
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5),
BlendMode.srcOut,
), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
), // This one will handle background + difference out
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(
MediaQuery.of(context).size.width / 2,
),
),
),
),
],
),
),
],
),
);
}
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,
),
),
)
],
)
I want to display the text (Facebook) exactly below the image (fb icon) without any spacing. Below is the code as of now :
#override Widget build(BuildContext context) {
return Scaffold(
// prevent pixel overflow when typing
resizeToAvoidBottomPadding: false,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/login_background.png",
),
fit: BoxFit.cover)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Image(
image: AssetImage("assets/fb_icon.png"),
width: 180.0,
height: 250.0,
),
new Text('Facebook.',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.white,)),
_textFields(),
_signInButton(),
_socialMediaSignIns(),
_accountButtons()
],
),
),
);
}
}
Currently, I see like this and would like to remove the space between image and text.
Actually you should use BoxFit.cover to see that in effect because image has got less physical height than what is being allocated to it.
Here is the solution
Image(
image: AssetImage("assets/fb_icon.png"),
width: 180.0,
height: 250.0,
fit: BoxFit.cover,
),
You could try other BoxFit to see which one suits you better.
Image(
image: AssetImage("assets/fb_icon.png"),
),
Text('Facebook.',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.white,))
It has to be no padding in this case. You can check padding exactly in png file such way:
Image(
image: AssetImage("assets/fb_icon.png"),
color: Colors.red,
colorBlendMode: BlendMode.multiply,
),
This will show real borders of your image