SingleChildScrollView in full device height

[Igor Karelin]

Hi all.

I've created a SingleChildScrollView with Column:

return Scaffold(
body: _bookDetailsUI(book),

Widget _bookDetailsUI(Book book) {
return SingleChildScrollView(
child: Column(
children: [
_bookHeaderWidget(book),
_ratingRow(),
_bookInfo(book),
_bookAnnotation(book),
_bookCategories(book),
],
),
);
}

It appears on full screen but not scrollable.

When i'm wrapping SingleChildScrollView with SafeArea, scrolling is working.

But i need it to be a full screen.

Thank you.

[Suzuki Tomohiro]

Would you create minimum reproducible project?

Does _bookHeaderWidget matter? (Does the non-scrolling problem occur even when you remove it) If not, then remove it.

Repeat the above for other widgets to find which widget is preventing the scroll.

--


You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.


To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.


To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/f69c4681-d7eb-4ce7-b913-77b9ef6ae32an%40googlegroups.com.

[Igor Karelin]

class BookDetail extends StatefulWidget {
@override
_BookDetailState createState() => _BookDetailState();
}

class _BookDetailState extends State<BookDetail> {
Book book;

@override
Widget build(BuildContext context) {
setState(() {
book = ModalRoute.of(context).settings.arguments as Book;
});
if (book != null) {
print('*** Received Book arguments: ${book.title}');
}
return Scaffold(
body: _bookDetailsUI(book),
);

}

Widget _bookDetailsUI(Book book) {
return SingleChildScrollView(
child: Column(
children: [
_bookHeaderWidget(book),
_ratingRow(),
_bookInfo(book),
_bookAnnotation(book),
_bookCategories(book),
],
),
);
}

Widget _bookHeaderWidget(Book book) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 425 / 375,
decoration: BoxDecoration(
color: backgroundColor,
image: DecorationImage(
fit: BoxFit.fitWidth,
colorFilter:
ColorFilter.mode(Colors.black.withOpacity(0.8), BlendMode.darken),
image: CachedNetworkImageProvider(
book.imageURL,
),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_cancelButton(),
_bookCover(book),
_bookTitle(book),
_bookAuthor(book),
_bookButtons(),
],
),
);
}

Widget _cancelButton() {
return Padding(
padding: const EdgeInsets.only(
top: 40,
),
child: Container(
height: 36,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
onPressed: () {
print('*** Going back to books');
Navigator.pop(context);
},
icon: Icon(
Icons.cancel,
color: Colors.white,
size: 36,
),
),
],
),
),
);
}

Widget _bookCover(Book book) {
return Center(
child: Container(
height: 200,
width: 150,
child: CachedNetworkImage(
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) {
return Container(
height: 60,
width: 60,
child: Image.asset(
'assets/images/delete_stop.png',
),
);
},
imageUrl: book.imageURL,
),
),
);
}

Widget _bookTitle(Book book) {
return Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
),
child: Text(
book.title,
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
);
}

Widget _bookAuthor(Book book) {
return Padding(
padding: const EdgeInsets.only(left: 16, right: 16),
child: Text(
book.author,
maxLines: 5,
style: TextStyle(
fontSize: 9,
color: Colors.white,
),
),
);
}

Widget _bookButtons() {
return Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
bottom: 10,
),
child: Container(
height: 36,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
CircleAvatar(
backgroundColor: Color.fromRGBO(79, 79, 79, 1),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.favorite,
color: Color.fromRGBO(235, 117, 117, 1),
),
),
),
SizedBox(
width: 16,
),
CircleAvatar(
backgroundColor: Color.fromRGBO(79, 79, 79, 1),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.file_upload,
color: Colors.white,
),
),
),
],
),
),
);
}

Widget _ratingRow() {
return Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
top: 16,
bottom: 16,
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'3,5',
style: TextStyle(
fontSize: 24,
color: greenColor,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 16,
),
Text(
'Рейтинг',
style: TextStyle(
fontSize: 13,
),
),
],
),
_readButton(),
],
),
);
}

Widget _readButton() {
return Container(
height: 26,
decoration: BoxDecoration(
color: greenColor,
borderRadius: BorderRadius.all(
Radius.circular(100),
),
),
child: MaterialButton(
onPressed: () {},
child: Row(
children: [
Icon(
Icons.check,
color: Colors.white,
),
Text(
'Прочитал',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
);
}

Widget _bookInfo(Book book) {
return Container();
}

Widget _bookAnnotation(Book book) {
return Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
),
child: Container(
height: 90,
child: Text(
book.annotation,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 16,
),
),
),
);
}

Widget _bookCategories(Book book) {
return Container();
}

// End of BookDetail class

[Suzuki Tomohiro]

Can you check whether _bookHeaderWidget matter? (Does the non-scrolling problem occur even when you remove it) If not, then remove it.

Repeat this for other widgets until you find which widget is preventing the scroll.

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/64427983-31bd-4812-bdce-3dab8fd17c9cn%40googlegroups.com.