I need help. At the moment I'm trying to implement a background on my login page.
My problem is that I use a custom shape painter which shows my background.
To make my login page more dynamic I have added a function resizeToAvoidBottomInset: true, to move the textfield over the keyboard.
But now I have the problem that my background will be smaller if I click on my text field.
Here is my login page:
My code:
class _DebugPage extends State<DebugPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: customSubAppBar('Debug', context),
body: Stack(
children: [
//my custom shape painter
Expanded(
child: CustomeShapePainer(),
),
//my custom widgets
_body(context),
],
),
);
}
}
Is there a way to set the background on fix size?
I think you can try set widget CustomeShapePainer wrap Widget Stack. I don't remember exactly but in some projects I did
child: SingleChildScrollView(
child: Container(
color: AppConstants.bgColor,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: CustomPaint(
painter: CurvePainter(),
child: Stack
Related
I want to disable WebViewX Scroll Effect. Unable to scroll when the cursor is on Webview Area. I want the whole page to scroll on the web. Any other package which can disable the scroll effect is also appreciated. Wanted this HTML in Android, iOS, and WEB
Check Video
Build Method
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 50),
_buildWebView(),
const SizedBox(
height: 500,
)
],
),
),
);
}
WebView Used
return WebViewX(
initialContent: html,
initialSourceType: SourceType.html,
height: 500,
width: MediaQuery.of(context).size.width,
);
},
I want to remove the strange padding on top of the status bar. I am simply using an image and want to put that image on top of the screen that is behind the status bar. So that the status bar icons should be overlayed on the image.
Simply using Scaffold as a parent widget and then simple an Image. Screen shot is here!
The icons are not properly overlapping the image, and there is a white padding on top head!
I am using an Android Emulator right now, can somebody please figure out what I am missing.
class PreSignInScreen extends StatelessWidget {
final PreSignInController controller = Get.put(PreSignInController());
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 10,
),
getRedCarBox(context),
]
);
)
}
Thanks & Advance
Try below code, I have tried
- Scaffold
- Column
- Container
- Image
Your Widget:
Scaffold(
body: Column(
children: [
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2022/03/27/11/23/cat-7094808__340.jpg',
),
),
),
),
//Add your other widgets here
],
),
),
Or Using SafeArea, top property false
SafeArea(
top: false,
child: Container(),
),
Result Screen->
Try this:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
return false;
},
child: Scaffold(
body: SafeArea(
top: false,
bottom: false,
child: _buildBody(),
),
),
);
}
Scaffold(
body: SafeArea(
top: false,
bottom: false,
child: _yourBody(),
),
Why to use SafeArea :
SafeArea class Null safety. A widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen.
I want to reuse mobile app code for flutter web. I already coded with AppBar() and body widgets in scaffold in all screens. Now i am taking 400 width and center for web, it is good except appbar.
Scaffold(
appBar: this.getAppBarWidget(),
body: Center(
child: Container(
width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
child: this.getBodyWidget(),
),
))
Above code is perfectly working for all screens of mobile and web except appbar in web.
How do i change width of appbar to fit width 400 ?
If i use Size.fromWidth(400) getting error.
Below code is working for mobile and web.
Scaffold(
body: Center(
child: Container(
width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
child: Column(
children: [
this.getCustomAppbarWidget(),
this.getBodyWidget(),
],
),
),
))
Please suggest me.
The size this widget would prefer if it were otherwise unconstrained.
In many cases it's only necessary to define one preferred dimension. For example the [Scaffold] only depends on its app bar's preferred height. In that case implementations of this method can just return new Size.fromHeight(myAppBarHeight).
But we can provide customAppBar like
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
const MyAppBar({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerLeft,
child: Container(
alignment: Alignment.center,
color: Colors.pink,
// we can set width here with conditions
width: 200,
height: kToolbarHeight,
child: Text("MY AppBar"),
),
);
}
///width doesnt matter
#override
Size get preferredSize => Size(200, kToolbarHeight);
}
and use
Scaffold(
extendBodyBehindAppBar: true,
appBar: MyAppBar(),
body: ......
if it cover the 1st item of body, and in this case use SizedBox(height: kToolbarHeight) to handle the situation if needed.
Result
As i know, width did not allow in AppBar. Only height is allowed in AppBar
toolbarHeight: 60,
But if you want to apply manually width in your AppBar you can wrap your AppBar in Padding component
return Scaffold(
body: Column(
children: [
Container(
width: kIsWeb? 400 : double.maxFinite,
child: AppBar(
title: Text('hello'),
),
),
Expanded(child: HomePageOne()), // this expanded is you page body
],
),
);
I try to achieve the feature: pinch to zoom in/out an image under another overlay image.
My approach is using photo_view to make the main photo zoomable and put the overlay image on top of the main photo by the "stack".
import 'package:photo_view/photo_view.dart';
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: <Widget>[
Container(
child: PhotoView(
initialScale: PhotoViewComputedScale.covered,
imageProvider: AssetImage("assets/mainphoto.jpg"),
),
),
),
Container(
child: Center(
child: AssetImage("assets/overlay.png”),
),
),
],
),
);
}
}
The result of the above code
But the overlay image completely disables the main photo, I cannot pinch to zoom in/out the main photo.
I think it’s because of Stack, I googled around it but still don’t have any proper solution.
If any suggestions, I am very appreciated.
Use IgnorePointer Widget
IgnorePointer(
child: Container(
child: Center(
child: Image.asset(
"assets/overlay.png",
),
),
),
)
I am use Flutter for web for make website. I want make webpage scroll when user scroll down like normal website.
I am try use Stack so I can place custom background behind widgets. This background must scroll when user scroll (must stick to widgets in front so background change).
(I cannot set background color using Scaffold because my background is use CustomPainter)
But I want center the widgets on webpage, so I wrap SingleChildScrollView in Center widget. But now on large horizontal screen the CustomPaintWidget() is not fill screen (there is blank space). I have try replace my CustomPaintWidget() with Container to test, but same issue.
Here my code:
Center(
child: SingleChildScrollView(
child:Stack(children: <Widget>[
CustomPaintWidget(),
Widgets(),
],),
Anyone know solution?
How to center widgets but also make background stretch?
Thanks!
SingleChildScrollView by definition shriknwraps it's child.
What you should try is
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height),
child: Center(
child: //Widget,
),
),
);
I think you can try something like:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
CustomPaintWidget(),
Center(
child: SingleChildScrollView(
child: Widgets(),
),
)
],
));
}
read that post, I think is all you need https://medium.com/#swav.kulinski/spike-parallax-in-flutter-seven-lines-of-code-16a1890d8d32
I know it is too late to answer but s.o may need it in future
You have to use Stack
for instance:
your MainClass:
class _BodyState extends State<Body> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
ScrollViewClass(),
Column(
children: [
//YOUR ITEMS
]),
);
ScrollviewClass:
class ScrollViewClass extends StatefulWidget {
#override
_ScrollViewClassState createState() => _ScrollViewClassState();
}
class _ScrollViewClassState extends State<ScrollViewClass> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 260, bottom: 100),
child: ListView(
children: [
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height),
child: Column(
children: [
//ADD YOUR ITEMS LIKE IMAGE, TEXT, CARD ETC...
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Text('fdgdfg')),
Center(child: Text('fdgdfg')),
],
)),
),
)
],
),
));
}
}
I know this is not the OP's scenario, but for others - If there is something above your scroll view, using the full height of the page will cause the scrollview to scroll prematurely, because the combined height of the widgets is now greater than the page height. Use LayoutBuilder instead of MediaQuery.of(context).size.height.
LayoutBuilder(builder: ((context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight),
child: Center(child: child)),
);
})