Develop Reference

when I tap on TextField then key board open but TextField not sliding on top flutter Android

return Scaffold(
body: Container(
height: double.infinity,
color: AppColors.whiteColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
createUpperBar(context, "Patient Registration"),
Form(
key: _formKey,
// autovalidate: true,
child: Expanded(
child: Container(
child: SingleChildScrollView(
child: Center(
child: Column(
children: [
Container(
margin: EdgeInsets.only(
left: SizeConfig.blockSizeVertical * 3,
),
-------etc
how to slide press on textfield
video link - https://drive.google.com/file/d/1zATdDJYLOdKP_Plr8DGddNbUh-48eDxw/view?usp=sharing

Wrap Container widget with SingleChildScrollView and this will work I have tested this code.
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
SizedBox(
height: 25.0,
),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
],
),
),
),
),
);
}
}

How can I adjust widget sizes for every platform?

This a empty screen widget that I used as homepage. On my phone (Samsung S8), all the widgets fit to screen perfect, but when I try Samsung A50 which has bigger screen, widget doesn't look like perfect. For example, they look bigger or texts are not written in single line. How can solve my code for looking perfect in all platform?
I share my code:
#override
Widget build(BuildContext context) {
return WillPopScope(
child: SafeArea(
child: Scaffold(
backgroundColor: kColorTheme1,
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
elevation: 20,
backgroundColor: Color(0xFFF2C3D4).withOpacity(1),
title:TitleBorderedText(title:"SEVIMLI YEMEKLER", textColor: Color(0xFFFFFB00)),
actions: [
CircleAvatar(
radius: 27,
backgroundColor: Colors.transparent,
backgroundImage: AssetImage(kCuttedLogoPath),
),
],
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(kBGWithLogoOpacity),
fit: BoxFit.cover,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: GridView.builder(
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount:categoryModels.length,
itemBuilder: (context,index){
if (categoryModels[index].categoryId==null){
return EmptyCard(where: "homeScreen",);
}
return CategoryCard(category: categoryModels[index]);
}
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
border: Border.all(style: BorderStyle.solid),
color: kColorTheme7,
borderRadius: BorderRadius.circular(40),
),
child: TextButton(
onPressed: (){
showModalBottomSheet(
context: context,
builder: (BuildContext context)=> AddMenuScreen(buttonText: "Menü Ekle",route: "homeScreen",),
);
},
child: TitleBorderedText(title: "LEZZET GRUBU EKLE",textColor: Colors.white,)
),
),
),
],
)
],
),
),
),
),

Stack Widget Error when using SingleChildScrollView

I have this code as profile screen which I need it to be able to fill a text like "HELLO" on this code example. But when I put a lot of text in it, the screen become overflow.
The problem is everytime I put SingleChildScrollView to avoid the overflow, I got another error instead.
Please tell me how I can fix this problem.
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: FutureBuilder<Profile>(
future: dataService.getHttp(),
builder: ...
),
),
);
}
Widget _buildView(detail) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200.0,
child: Center(
child: Image.network(
'https://i.imgur.com/2F3Al82.jpg',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
),
Expanded(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Text('HELLO'),
]
),
)
),
],
),
Positioned(
top: 150.0,
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: NetworkImage('https://i.imgur.com/2F3Al82.jpg'),
),
),
),
)
],
);
}
this is the error

You are getting this error because of the Expanded widget. SingleChildScrollView allows for infinite height and expanded will take up as much space as it can these two thing are incompatible if you remove the Expanded widget it should work. If you want some space around that container I suggest the Containers margin property.

How to make Horizontal Scroll ListView inside the SingleChildScroll

I want to create a layout like this,
Image
I want to create a flutter app which can scroll vertically and also some content of the app should scroll horizontally as describe in the picture. I used ListView with scroll horizontal inside the SingleChildScrollView but it not work. It hide the content Horizontal listView content and the content below the ListView.
So How to make this layout
Code I used,
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10),
child: CustomizedAppBar(),
),
SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.only(left: 10,bottom: 5),
child: Text(
'Hello Jessica.',
style: kArtistNamePlayScreen,
),
),
Padding(
padding: const EdgeInsets.only(left: 10,bottom: 40),
child: Text(
'Recommendeddd',
style: kSongNamePlayScreen,
),
),
//TODO Insert Carousel Here
ListView(
children: <Widget>[
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
new BoxShadow(
color: Colors.grey,
offset: Offset(1.5,1.5),
blurRadius: 3,
),
],
),
),
],
),
Text(
'Popular artists',
style: kSongNamePlayScreen,
),
Container(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
width: 60,
height: 75,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
)
),
),
)
],
),
),
SongList(
songListSongName: 'Beautiful People',
songListArtistName: 'Ed Sheeran',
songListAvatarImage: AssetImage('images/beautiful_people_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Panini',
songListArtistName: 'Lil Nas X',
songListAvatarImage: AssetImage('images/Panini_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Do You Sleep',
songListArtistName: 'Sam Samith',
songListAvatarImage: AssetImage('images/Do_you_sleep_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Bad Guys',
songListArtistName: 'Billie Eilish',
songListAvatarImage: AssetImage('images/Bad_guys_l.jpg'),
heartClick: (){},
)
],
),
)

Instead of ListView, you can use SingleChildScrollView with Row as child. Then give the SingleChildScrollView the scrollDirection: Axis.horizontal Code:
//TODO Insert Carousel Here
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
new BoxShadow(
color: Colors.grey,
offset: Offset(1.5, 1.5),
blurRadius: 3,
),
],
),
),
],
),
),

You could use a ListView with horizontal scroll, it has to be wrapped inside a Container or SizedBox with a specific height.
Using ListView.builder could be more efficient, here is a quick example:
final _items = List.generate(20, (e) => e);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text("A"),
SizedBox(
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _items.length,
itemBuilder: (context, index) {
print('$index');
return SizedBox(
width: 150.0,
child: Center(child: Text('${_items[index]}')),
);
}),
),
Text("B"),
],
),
),
);
}
You could see the prints in the console, indicating the items are created only when they're scrolled onto the screen.

How to set a BackdropFilter using dynamic-sized widgets in Flutter

I have a column: header with text, body with image, footer with text, all widgets have transparent backgrounds.
I want to set the background using a blur of the main image but I keep reaching dead ends.
In some situations this would be straight forward but in my scenario the image could be of any size and aspect ratio, and I need the effect to be wrapped with the column.
Here are my two failed attempts:
Method 1
I have a Stack with the image as the first item, then a BackdropFilter with ImageFilter blur, then my Column.
This works but the Image bleeds out from under the Column because of the image size (which can be any size).
I want to constrain it to the height of my Column.
return Container(
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: <Widget>[
Positioned.fill(child: Image.network(_imgUrl)),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
)),
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
// https://stackoverflow.com/a/41846093/3429021
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Header(),
BodyPhoto(),
Footer()
],
),
),
],
),
Method 2
Putting the column in a Container with a DecorationImage, which sizes the image perfectly, but I have no way of applying the blur effect.
(_streamItem is my Column wrapped in a container)
body: Container(child: _streamItem,
decoration: new BoxDecoration(image: DecorationImage(
image: NetworkImage(_streamItem.imgUrl),
fit: BoxFit.cover)
)
)
Any ideas?

I think you can consider using Positioned widget - it has width and height property. We can combine these widgets: Positioned > ClipRect > BackdropFilter. Please refer to the Gist: https://gist.github.com/anticafe/dc84cf6488d9defea437b702b13e2749#file-blur_multiple_widgets_with_dynamic_region-dart
Let take a look at this article to see more about BackdropFilter.

You can explicitly give a fix height to the container that contains the image, which will even look better.
In this example I have set three images of very different dimensions and has no problem rendering.
Refer the below code:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('So Help'),
),
body: new ListView(
children: <Widget>[
MyContainer(
imageUrl:
'https://i.dailymail.co.uk/i/pix/2017/01/16/20/332EE38400000578-4125738-image-a-132_1484600112489.jpg',
),
MyContainer(
imageUrl:
'http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg',
),
MyContainer(
imageUrl:
'http://wackymania.com/image/2011/6/vertical-panoramic-photography/vertical-panoramic-photography-15.jpg',
),
],
),
);
}
}
class MyContainer extends StatelessWidget {
final String imageUrl;
MyContainer({#required this.imageUrl});
#override
Widget build(BuildContext context) {
return new Container(
height: 300.0,
child: new Stack(
children: <Widget>[
new Container(
child: Image.network(
this.imageUrl,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
),
BackdropFilter(
filter: Dui.ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
color: Colors.transparent,
),
),
new Container(
height: 300.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: new Text(
'Header',
style: new TextStyle(color: Colors.white),
),
),
new Expanded(
child: Image.network(imageUrl),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: new Text(
'Footer',
style: new TextStyle(color: Colors.white),
),
),
],
),
)
],
),
);
}
}