i have column and inside column i have 3 widget, HtmlWidget ,Transform.Scale, and HtmlWidget, inside Transform.Scale i have image, this is the code, i want make the image overflow from their top widget and bottom widget
SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
// Container(
// child: HtmlWidget(
// """
// <div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
// """,
// ),
// ),
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: HtmlWidget(
"""
<div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
""",
),
),
Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 100,
child: Transform.scale(
transformHitTests: true,
scale: 3,
child: Center(
child: Image(
image: AssetImage("lib/assets/images/example.jpeg"),
),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: HtmlWidget(
"""
<div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
""",
),
),
],
),
)
after i change that code, the top still same
You can use a Stack like this
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 100,
),
),
),
Container(
child: Transform.scale(
transformHitTests: true,
scale: 3,
child: Center(
child: Image(
image: AssetImage("lib/assets/images/example.jpeg"),
),
),
),
),
]
)
Related
My goal is to have a dog as my DragTarget and multiple items I can drag to the dog.
Whenever I drag one item the others are switching positions.
Also when I drag the item onto the DragTarget I want to print out a text in a text-box - but nothing is executed even though I'm using onAccept.
This is the code I have:
import 'package:flutter/material.dart';
import 'package:prototype/screens/start-page.dart';
class DragDropItems extends StatelessWidget {
const DragDropItems({super.key});
final Color color = Colors.black;
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/images/Environment.png'))),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(children: <Widget>[
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 200),
child: DragTarget<String>(
onAccept: (data) => Padding(
padding: const EdgeInsets.all(15),
child: Column(
children: const <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'asdf',
hintText: 'gang'),
))
],
),
),
builder: (_, __, ___) {
return Container(
width: 300,
height: 300,
alignment: Alignment.center,
child: Image.asset('assets/images/Doggo3.png'),
);
},
))),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Draggable<String>(
data: 'red',
feedback: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child:
Image.asset('assets/images/cupcake1.png'),
)),
childWhenDragging: Container(),
child: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child: Image.asset('assets/images/cupcake1.png'),
),
),
),
Draggable<String>(
data: 'blue',
feedback: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child: Image.asset('assets/images/banana1.png'),
)),
childWhenDragging: Container(),
child: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child: Image.asset('assets/images/banana1.png'),
),
),
),
Draggable<String>(
data: 'green',
feedback: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child:
Image.asset('assets/images/hamburger1.png'),
)),
childWhenDragging: Container(),
child: SizedBox(
height: 90.0,
width: 90.0,
child: Center(
child:
Image.asset('assets/images/hamburger1.png'),
),
),
),
],
)))
]),
));
}
}
this is the result when executing on the emulator:
enter image description here
I would appreciate any help!
You need to provide the widget passed to the child parameter for childWhenDragging also. It is not required for both to be the same. You can use any widget.
Check this article: https://blog.logrocket.com/drag-and-drop-ui-elements-in-flutter-with-draggable-and-dragtarget/
Why does this SingleChildScrollView overflow instead of scroll when the screen height is resized too small? I've used this design because the bottom widget needs to be pushed to the bottom.
return NavigationListener(builder: (context, child) {
return SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: maxSideMenuWidth,
child: Column(
children: [
Container(
height: 155, color: Colors.purple, child: const MenuHeader()),
Container(
color: Colors.red,
height: 327,
child: MainMenu(
primaryDestinations: primaryDestinations,
secondaryDestinations: secondaryDestinations,
onNavigate: onNavigate,
isSelected: isSelected,
)),
Spacer(),
Container(
color: Colors.green,
height: 135,
child: LoginContextWidget(user, userDetails, logOut)),
],
),
));
});
Try This code
return NavigationListener(builder: (context, child) {
return SizedBox(
height: MediaQuery.of(context).size.height,
width: maxSideMenuWidth,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 155, color: Colors.purple, child: const MenuHeader()),
Container(
color: Colors.red,
height: 327,
child: MainMenu(
primaryDestinations: primaryDestinations,
secondaryDestinations: secondaryDestinations,
onNavigate: onNavigate,
isSelected: isSelected,
)),
Spacer(),
Container(
color: Colors.green,
height: 135,
child: LoginContextWidget(user, userDetails, logOut)),
],
),
),
);
});
wrap singlechildscrollview in expanded
return NavigationListener(builder: (context, child) {
return Expanded(
child:SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: maxSideMenuWidth,
child: Column(
children: [
Container(
height: 155, color: Colors.purple, child: const MenuHeader()),
Container(
color: Colors.red,
height: 327,
child: MainMenu(
primaryDestinations: primaryDestinations,
secondaryDestinations: secondaryDestinations,
onNavigate: onNavigate,
isSelected: isSelected,
)),
Spacer(),
Container(
color: Colors.green,
height: 135,
child: LoginContextWidget(user, userDetails, logOut)),
],
),
));
};
});
floating image
Container(
clipBehavior: Clip.none,
child: Stack(
fit: StackFit.passthrough,
children: <Widget>[
//Stack helps to overlap widgets
Positioned(
top: 80,
left: 50, //position of the widget
child: Container(
clipBehavior: Clip.none,
// height: 250,
// width: 250,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange
.withOpacity(0.5) //background color with opacity
),
child: Image.asset("assests/FT300.png"),
),
),
Positioned(
left: -80,
top: -50,
child: Container(
height: 180,
width: 220,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.redAccent.withOpacity(0.5),
),
),
),
Positioned(
//main content container postition.
child: Container(
height: 250,
alignment: Alignment.center,
child: Text(
"Stacked Containers Together",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
)
],
),`
I would like to make the picture floating outside its container as shown in the picture I have tried to use a stack widget with
Clipbehaviour.none
but the picture still appears inside the container.
Is there anybody who has encountered this or have a solution to this?
Thanks
if you need the widget to be part of outside Stack, you need this:
Stack(
overflow: Overflow.visible,
children:
As the overflow is deprecated, the first solution to the given snippet is
Stack(
clipBehavior: Clip.none,
children:
Full snippet update:
Container(
clipBehavior: Clip.none,
color: AppRepoColors().appRedColor(),
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
//Stack helps to overlap widgets
Positioned(
top: 0,
left: 50, //position of the widget
child: Container(
clipBehavior: Clip.none,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange
.withOpacity(0.5) //background color with opacity
),
child: Image.asset("assests/FT300.png"),
),
),
Positioned(
left: -80,
top: -50,
child: Container(
height: 180,
width: 220,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.redAccent.withOpacity(0.5),
),
),
),
Positioned(
//main content container postition.
child: Container(
height: 250,
alignment: Alignment.center,
child: Text(
"Stacked Containers Together",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
)
],
),
),
I am trying to use stack in my widget tree:
body: Center(
child: SingleChildScrollView(
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
// card view
alignment: Alignment.center,
height: 200,
margin: EdgeInsets.only(
top: 20.0, bottom: 50.0, left: 50.0, right: 50.0),
decoration: BoxDecoration(
color: color_transparent_black,
borderRadius: BorderRadius.circular(14.0),
),
),
Positioned(
top: -60,
left: 0,
right: 0,
bottom: 0,
child: Align(
alignment: Alignment.topCenter,
child: Container(
width: width * 0.3,
height: height * 0.2,
child: CircleAvatar(
backgroundColor: Colors.transparent,
child: Image.asset("assets/images/ic_setting.png"),
),
),
),
),
],
),
),
),
);
And this result is this:
Why top of setting icon has been deleted?
I fixed the problem:
body: Center(
child: SingleChildScrollView(
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Container(
// card view
alignment: Alignment.center,
height: 200,
margin: EdgeInsets.only(
top: 80.0, bottom: 50.0, left: 50.0, right: 50.0),
decoration: BoxDecoration(
color: color_transparent_black,
borderRadius: BorderRadius.circular(14.0),
),
),
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: Align(
alignment: Alignment.topCenter,
child: Container(
width: width * 0.3,
height: height * 0.2,
child: CircleAvatar(
backgroundColor: Colors.transparent,
child: Image.asset("assets/images/ic_setting.png"),
),
),
),
),
],
),
),
),
);
and it is result:
I increases Top margin to top: 80.0 and replace Positioned with FractionalTranslation. Actually it works with Positioned too.
Its most likely because you set the top: -60 for the Positioned widget.
Edit 1:
Stop clipping by removing SingleChildScrollView
And you can center all children of Stack using alignment: Alignment.topCenter property of Stack widget itself.
child: Center(
child: Stack(
overflow: Overflow.visible,
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 200,
...
),
Positioned(
top: -60,
...
child: Container(
...
),
),
),
]),
I'm trying to make a card with "balloon" in top of card Here a example of what i'm trying to do
I'm doin'g in Flutter, the last update, i've tried add stack with positioned, but i got this horrible thing
My code about this is:
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration:
BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
),
Positioned(
left: 19,
top: 37,
child: Container(
height: 20,
width: 20,
color: Colors.green,
),
),
],
),
Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
)
],
);
And my expected response was the link above
Please try this :-
Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration: BoxDecoration(
color: Colors.redAccent, shape: BoxShape.circle),
),
Container(
height: 40,
width: 2,
color: Colors.green,
),
],
),
),
Container(
width: double.infinity,
child: Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
),
)
],
)