Develop Reference

flutter bottomNavigationBar: BottomAppBar In IPhone it can't full fill, from bottom screen

in android it is sowing perfect,but iphone it not full fill from bottom.
please check bottom:bottomNavigationBar section code........
**flutter bottomNavigationBar: BottomAppBar In IPhone it can't full fill, from bottom **
my code is
import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../authentication/presentation/views/otp_login_verifecation.dart';
class homeScreen extends StatefulWidget {
const homeScreen({
Key? key,
}) : super(key: key);
#override
State<homeScreen> createState() => _MyhomeScreen();
}
class _MyhomeScreen extends State<homeScreen> {
Country _selectedFilteredDialogCountry =
CountryPickerUtils.getCountryByPhoneCode('91');
TextEditingController _phone = TextEditingController();
#override
Widget build(BuildContext context) {
ScreenUtil.init(context, designSize: const Size(360, 800));
var platform = Theme.of(context).platform;
final screenW = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(35),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(46),
height: ScreenUtil().setHeight(46),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: AssetImage("assets/profile/profile.png"),
fit: BoxFit.fitHeight,
),
borderRadius: BorderRadius.all(Radius.circular(50.0)),
border: Border.all(
color: Colors.greenAccent,
width: 2.0.w,
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(30),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(81),
height: ScreenUtil().setHeight(45),
child: RichText(
text: TextSpan(
text: 'Vishal\n',
style: TextStyle(
fontSize: 24.sp,
color: Color(0xff480377),
fontWeight: FontWeight.w700,
fontFamily: "roboto"),
children: <TextSpan>[
TextSpan(
text: 'Global Rank: ',
style: TextStyle(
color: Color(0xff480377).withOpacity(0.30.sp),
fontSize: 12,
fontFamily: "roboto",
),
),
TextSpan(
text: '21',
style: TextStyle(
fontWeight: FontWeight.w100,
fontSize: 12.sp)),
],
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(45),
left: ScreenUtil().setWidth(145),
),
width: ScreenUtil().setWidth(30),
height: ScreenUtil().setHeight(30),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/home/menu-vector.png"),
fit: BoxFit.fill,
),
),
),
],
),
],
),
],
),
//bottom:bottomNavigationBar ---------------------------------------------------
bottomNavigationBar: BottomAppBar(
child: Container(
// margin: EdgeInsets.only(top:ScreenUtil().setHeight(60),),
height: ScreenUtil().setHeight(51),
// width: ScreenUtil().setWidth(365),
color: Color(0xFFEFEFEF),
child: Row(
// mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5),),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
OtpLoginVerifecation(phone: _phone.text, country_code: _selectedFilteredDialogCountry.phoneCode,)));
},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-home.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-shopping-cart.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-credit-card.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/TBD.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
]
),
)
),
);
}
}
in android it is sowing perfect,but iphone it not full fill from bottom.
please check bottom:bottomNavigationBar section code........
flutter bottomNavigationBar: BottomAppBar In IPhone it can't full fill, from button

The BottomAppBar has a safe area by default. You may probably use BottomNavigationBar or create your custom widget. Check the code below.. That's what bottomAppBar will return
PhysicalShape(
clipper: clipper,
elevation: elevation,
color: effectiveColor,
clipBehavior: widget.clipBehavior,
child: Material(
key: materialKey,
type: MaterialType.transparency,
child: widget.child == null
? null
: SafeArea(child: widget.child!),//safe area is here
),
)

Not the exact answer for the issue, but setting backgroundColor in Scaffold to same as in BottomAppBar and then setting elevation in BottomAppBar to zero, gives an impression that BottomAppBar extends to bottom.

I Will Solve It. create custom NavBar method
import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../authentication/presentation/views/otp_login_verifecation.dart';
class homeScreen extends StatefulWidget {
const homeScreen({
Key? key,
}) : super(key: key);
#override
State<homeScreen> createState() => _MyhomeScreen();
}
class _MyhomeScreen extends State<homeScreen> {
Country _selectedFilteredDialogCountry =
CountryPickerUtils.getCountryByPhoneCode('91');
TextEditingController _phone = TextEditingController();
#override
Widget build(BuildContext context) {
ScreenUtil.init(context, designSize: const Size(360, 800));
var platform = Theme.of(context).platform;
final screenW = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(35),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(46),
height: ScreenUtil().setHeight(46),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: AssetImage("assets/profile/profile.png"),
fit: BoxFit.fitHeight,
),
borderRadius: BorderRadius.all(Radius.circular(50.0)),
border: Border.all(
color: Colors.greenAccent,
width: 2.0.w,
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(30),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(81),
height: ScreenUtil().setHeight(45),
child: RichText(
text: TextSpan(
text: 'Vishal\n',
style: TextStyle(
fontSize: 24.sp,
color: Color(0xff480377),
fontWeight: FontWeight.w700,
fontFamily: "roboto"),
children: <TextSpan>[
TextSpan(
text: 'Global Rank: ',
style: TextStyle(
color: Color(0xff480377).withOpacity(0.30.sp),
fontSize: 12,
fontFamily: "roboto",
),
),
TextSpan(
text: '21',
style: TextStyle(
fontWeight: FontWeight.w100,
fontSize: 12.sp)),
],
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(45),
left: ScreenUtil().setWidth(145),
),
width: ScreenUtil().setWidth(30),
height: ScreenUtil().setHeight(30),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/home/menu-vector.png"),
fit: BoxFit.fill,
),
),
),
],
),
],
),
],
),
//bottom:bottomNavigationBar ---------------------------------------------------
bottomNavigationBar: buildMyNavBar(context),
);
}
Container buildMyNavBar(BuildContext context) {
return Container(
height: 60.h,
decoration: const BoxDecoration(
color: Color(0xFFEFEFEF),
// borderRadius: const BorderRadius.only(
// topLeft: Radius.circular(20),
// topRight: Radius.circular(20),
// ),
),
child: Row(
// mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(5),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OtpLoginVerifecation(
phone: _phone.text,
country_code:
_selectedFilteredDialogCountry.phoneCode,
)));
},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-home.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(
color: Color(0xFF000000).withOpacity(0.10.sp),
width: 1.w,
),
FlatButton(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-shopping-cart.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(
color: Color(0xFF000000).withOpacity(0.10.sp),
width: 1.w,
),
FlatButton(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-credit-card.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(
color: Color(0xFF000000).withOpacity(0.10.sp),
width: 1.w,
),
FlatButton(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/TBD.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
]),
);
}
}

type 'List<Widget>' is not a subtype of type 'Widget

'
I am a beginner in flutter dev and was trying to implement the screen but then cannot seem to get my head around the error thrown
This code below is supposed to display an onboarding screen but it seems to throw an error with the emulator regarding the title and cannot seem to find any solution on the web any help?'
class OnBoardingScreen extends StatefulWidget {
#override
_OnBoardingScreenState createState() => _OnBoardingScreenState();
}
class _OnBoardingScreenState extends State<OnBoardingScreen> {
final int _numPages = 5;
final PageController _pageController = PageController(initialPage: 0);
int _currentPage =0;
void _onIntroEnd(context) {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => SignUpScreen()));
}
void _onIntroSkip(context) {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => LoginScreen()));
}
_buildPageIndicator(){
List<Widget> list =[];
for (int i=0;i<_numPages;i++){
list.add(i == _currentPage ? _indicator(true) : _indicator(false) );
}
return list;
}
_indicator (bool isActive){
return AnimatedContainer(duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width: isActive ? 24.0 : 16.0,
decoration: BoxDecoration(color: isActive ? Colors.white:Color(0xF385AD5),
borderRadius:BorderRadius.all(Radius.circular(12))
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion(
value: null,
child: Container(
decoration: BoxDecoration(
gradient:LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1,0.4,0.7,0.9],
colors: [
Color(0xF3C5DD7),
Color(0xF092458),
Color(0xF1B5695),
Color(0xF4664A0)
]
)
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: (){
_onIntroSkip(context);
},
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
Container(
height: 600.0,
child: PageView(
physics :ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page){
setState(() {
_currentPage =page;
});
},
children: [
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image(
image: AssetImage('assets/rooms.webp'
),
height: 300,
width: 300,
),
),
SizedBox(
height: 30.0,
),
Text('Lorem Ipsum',
style: TextStyle(
fontWeight: FontWeight.w800
),
),
SizedBox(height: 15.0,),
Text('Lorem IpSsum',style:TextStyle(
fontWeight: FontWeight.w300
),
)
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image(
image: AssetImage('assets/thoughts.webp'
),
height: 300,
width: 300,
),
),
SizedBox(
height: 30.0,
),
Text('Lorem Ipsum',
style: TextStyle(
fontWeight: FontWeight.w800
),
),
SizedBox(height: 15.0,),
Text('Lorem IpSsum',style:TextStyle(
fontWeight: FontWeight.w300
),
)
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image(
image: AssetImage('group.jpg'
),
height: 300,
width: 300,
),
),
SizedBox(
height: 30.0,
),
Text('Lorem Ipsum',
style: TextStyle(
fontWeight: FontWeight.w800
),
),
SizedBox(height: 15.0,),
Text('Lorem IpSsum',style:TextStyle(
fontWeight: FontWeight.w300
),
)
],
),
),
],
),
),
Row(
mainAxisAlignment:MainAxisAlignment.center ,children: [
_buildPageIndicator() ,
],
),
_currentPage != _numPages - 1 ?
Expanded(
child: Align(
alignment: FractionalOffset.bottomRight,
child: TextButton(
onPressed: () {
_pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
}, child:Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text('Next',style: TextStyle(color: Colors.white,
fontSize: 22.0),),
SizedBox(
width: 10.0,
),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30,
)
],
),
),
),
)
:
Text("")
],
),
),
),
),
bottomSheet:_currentPage == _numPages -1 ? Container(
height: 100.0,
width: double.infinity,
color: Colors.white,
child: GestureDetector(
onTap: (){
_onIntroEnd(context);
},
child: Center(
child: Padding(padding: EdgeInsets.only(bottom: 30.0),child:
Text(
'Get Started',
style: TextStyle(
color: Color(0xF3C5DD7),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
)),
),
),
) :
Text(''),
);
}
}
'This is supposed to display an Onboarding Screen but throws an error . This is shown with the image attached '

Change these parts of your code to look like this:
List<Widget> _buildPageIndicator(){
List<Widget> list =[];
for (int i=0;i<_numPages;i++){
list.add(i == _currentPage ? _indicator(true) : _indicator(false) );
}
return list;
}
.
.
.
.
Row(
mainAxisAlignment:MainAxisAlignment.center,
children: _buildPageIndicator() ,
),

Replace this part of your code:
...
Row(
mainAxisAlignment:MainAxisAlignment.center ,children: [
_buildPageIndicator() ,
],
),
...
with
...
Row(
mainAxisAlignment:MainAxisAlignment.center, children: _buildPageIndicator(),
),
...
or with
...
Row(
mainAxisAlignment:MainAxisAlignment.center ,children: [
..._buildPageIndicator(),
],
),
...

Using TabBarView with DraggableScrollableSheet in Flutter

I am developing a city travel guide application for my project. In this project, I have page like this:
Screenshot
In this page, I want to make the container with red border scrollable vertically until green line with DraggableScrollableSheet . And also I want to add TabBarView to the same container and scroll horizontally.
But I can not handle, encountered with many render errors.
How can i fix this?
Here is the full code:
import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';
class CategoryScreen extends StatefulWidget {
final double _expandedBottomSheetBottomPosition = 0;
final townimage;
const CategoryScreen({Key key, this.townimage}) : super(key: key);
#override
_CategoryScreen createState() => _CategoryScreen(
townimage: this.townimage,
);
}
class _CategoryScreen extends State<CategoryScreen>
with TickerProviderStateMixin, AfterLayoutMixin<CategoryScreen> {
var townimage;
_CategoryScreen({this.townimage});
double _bottomSheetBottomPosition = -330;
bool isCollapsed = false;
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(elevation: 0, backgroundColor: Colors.transparent),
body: Container(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Hero(
tag: "image" + townimage,
child: Image.asset(
"images/photos/turkey.jpg",
fit: BoxFit.cover,
)),
AnimatedPositioned(
duration: const Duration(milliseconds: 500),
curve: Curves.decelerate,
bottom: _bottomSheetBottomPosition,
left: 0,
right: 0,
child: Column(
children: [
_tabBar(),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3.0),
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 32),
height: 90,
child: Row(
children: [
Text(
"Historical Places",
style: TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
SingleChildScrollView(
physics: ScrollPhysics(),
child: _clipsWidget(),
),
],
),
),
],
),
),
],
),
),
);
}
Widget _clipsWidget() {
return Container(
color: Theme.of(context).canvasColor,
height: 250,
margin: const EdgeInsets.symmetric(horizontal: 16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.account_balance_rounded),
Text("I want to add TabBarView to this area"),
Text(
"Some Future Builder elements will be implemented.",
)
],
),
));
}
#override
void afterFirstLayout(BuildContext context) {
Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
isCollapsed = true;
_bottomSheetBottomPosition = widget._expandedBottomSheetBottomPosition;
});
});
}
Widget _tabBar() {
return TabBar(
controller: _tabController,
indicatorColor: Colors.transparent,
isScrollable: true,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelPadding: EdgeInsets.symmetric(horizontal: 10),
tabs: [
Container(
height: 70,
child: Tab(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Theme.of(context).canvasColor.withOpacity(0.8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.account_balance_rounded,
),
),
),
],
)),
),
Container(
height: 70,
child: Tab(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Theme.of(context).canvasColor.withOpacity(0.8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.park,
),
),
),
],
)),
),
]);
}
}

Container text and icons alignment- need to align this icon to right of this container

I need to make this favourite icon to the right of the container. I can use padding but is it ok? I mean is it going to work with all devices. Is there any solid way to align these 3 containers? I made a list view because I am adding more stuff like this one. can you guys help me with this?
Here is the image
Here is my code
class _OrdersState extends State<Orders> {
#override
Widget build(BuildContext context) {
return Material(
child: SafeArea(
child: Stack(
children: [
Background(),
Positioned(
top: 10,
left: 5,
child: SizedBox(
// width: 10,
// height: 10,
child: Container(
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
//go back
onPressed: () => Navigator.of(context).pop(),
),
),
),
),
Positioned(
top: 90,
left: 22,
right: 22,
child: SizedBox(
width: 350,
height: 900,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
),
],
),
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
),
),
),
),
],
),
),
);
}
}

In the Row try to use and Expanded widget like this
Row(
children: [
Expanded(
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
],
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
)

I have a problem with the spaces on Flutter

I can't understand what I'm doing wrong.
I have created a small detail page for an application that I am developing on vegan recipes.
I have a space that I can't take away and I don't understand what generated it. Space is what you see circled in red.
Can you help me ?
Thank you,
Vincenzo
class _CookDetailState extends State<CookDetail> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(this.widget.ricetta.title),
backgroundColor: AppColors.darkModeBackgroundColor),
body: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: Hero(
tag: this.widget.ricetta.title,
child: Container(
decoration:
BoxDecoration(image: DecorationImage(image: NetworkImage("https://cdn.pixabay.com/photo/2017/09/16/19/21/salad-2756467__340.jpg"),
fit: BoxFit.cover)),
),
),
),
// white container
Positioned(
left: 24.0,
right: 24.0,
bottom: 16.0,
child: Container(
//height: MediaQuery.of(context).size.height * 0.75,
//height: 650,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 100, sigmaY: 200),
child: Container(
padding: EdgeInsets.all(16.0),
height: 500,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16.0),
height: 800,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
this.widget.ricetta.title,
style: TextStyle(color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold),
),
Spacer(),
Icon(
Icons.favorite_border,
size: 24.0,
color: Colors.white,
),
],
),
new Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
this._generateList(this.widget.ricetta.listIngredieti),
this._generateStep(this.widget.ricetta.listPassaggio),
],
),
),
],
),
),
),
),
),
),
),
),
],
),
);
}
Widget _generateList(List<Ingrediente> listIngrediente){
return Column(
children: <Widget>[
for ( var myElement in listIngrediente ) Text(
myElement.title + " " + myElement.quantita,
style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600))
],
);
}
Widget _generateStep(List<StepRicetta> listStep){
return Column(
children: <Widget>[
for (var myStep in listStep) CheckboxListTile(title: AutoSizeText(myStep.title),
value: false, onChanged: (bool selected){
print("Valore selected");
},
secondary: const Icon(Icons.hourglass_empty),
)
],
);
}
}
My concept would be to leave the writing "Recipe 1", blocked, scrolling only and exclusively the list concerning the list of ingredients, such as "Put the bread", "Put 300 g of water"

I think your second EdgeInsets.all(16.0) create the space, do you have try this : EdgeInset.only(left: 16.0, right: 16.0) ?