Nested Scrollview can't scroll until the bottom (constrained) - flutter

I'm new to flutter development and I'm trying to create a contact book page that will load recent contact and all of my contact list, I managed to get the data and build it into the widget.
The problem is when there are a lot of contact (let say 20 contacts). If the screen size is small it can only scroll until 7-8 contacts, but I know there's more to it. But I guess my nestedScrollView won't let me to scroll down anymore.. Like it's constrained by something
what's the problem and how to fix this ? Here's my code:
/// BODY
body: WillPopScope(
onWillPop: () {
print('hello');
},
child: ListView(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
height: MediaQuery.of(context).size.height,
child: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (context, isScrolled) {
return [
SliverPersistentHeader(
pinned: true,
floating: false,
delegate: ChooseUsersHeaderDelegate(
widgetList: Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/// Build Search Box Function
buildSearch(),
],
),
),
minHeight: selectedContactId.isNotEmpty ? 135 : 60,
maxHeight: selectedContactId.isNotEmpty ? 135 : 60,
parentContext: context,
),
),
];
},
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/// Recent Contacts Subtitle
Text(
'recent',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: primaryColor,
fontStyle: FontStyle.normal,
),
).tr(),
/// Recent Contacts
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
isLoading
? ReusableLoadingContact()
: NotificationListener<
OverscrollIndicatorNotification>(
onNotification: (overScroll) {
overScroll.disallowIndicator();
return true;
},
child: buildWidget(context, 'recent')),
],
),
SizedBox(height: 15),
/// All Contacts Subtitle
Text(
'allContacts',
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w500,
color: primaryColor,
fontStyle: FontStyle.normal,
),
).tr(),
/// All Contacts
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
isLoading
? ReusableLoadingContact()
: NotificationListener<
OverscrollIndicatorNotification>(
onNotification: (overScroll) {
overScroll.disallowIndicator();
return true;
},
child: buildWidget(context, 'contacts')),
],
),
],
),
),
),
)
],
),
),

Related

Flutter: Errors when wrapping Layoutbuilder and Text in Column

I currently have a listview with an alphabet scroller on the side. I'm trying to add a searchbox to the top, but whenever I wrap something in a column, I get errors.
Using the current code, ListView inside Stack is throwing Vertical viewport was given unbounded height.
When I remove the column and Text('TestString'), my code works fine. I have tried adding an Expandable around the ListView.Builder but this also doesn't seem to solve it.
#override
Widget build(BuildContext context) {
height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: Text(widget.title,
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold)),
centerTitle: true,
),
body: Column(
children: [
Text('TestString'),
new LayoutBuilder(
builder: (context, constraints) {
return new Stack(children: [
//Causes the current issue
ListView.builder(
itemCount: exampleList.length,
controller: _controller,
itemExtent: _itemsizeheight,
itemBuilder: (context, position) {
return Padding(
padding: const EdgeInsets.only(right: 32.0),
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
exampleList[position],
style: TextStyle(fontSize: 20.0),
),
),
));
},
),
Positioned(
right: _marginRight,
top: _offsetContainer,
child: _getSpeechBubble()),
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTapDown: (details) {
_onTapDown(details);
},
child: GestureDetector(
onVerticalDragUpdate: _onVerticalDragUpdate,
onVerticalDragStart: _onVerticalDragStart,
onVerticalDragEnd: (details) {
setState(() {
isPressed = false;
});
},
child: Container(
//height: 20.0 * 26,
color: Colors.transparent,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: []..addAll(
new List.generate(_alphabet.length,
(index) => _getAlphabetItem(index)),
),
),
),
),
),
),
]);
},
),
],
),
);
}
_getSpeechBubble() {
return isPressed
? new SpeechBubble(
nipLocation: NipLocation.RIGHT,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 30,
child: Center(
child: Text(
"${_text ?? "${_alphabet.first}"}",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
),
),
],
),
)
: SizedBox.shrink();
}
ValueGetter? callback(int value) {}
_getAlphabetItem(int index) {
return new Expanded(
child: new Container(
width: 40,
height: 20,
alignment: Alignment.center,
child: new Text(
_alphabet[index],
style: (index == posSelected)
? new TextStyle(fontSize: 16, fontWeight: FontWeight.w700)
: new TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
),
),
);
}
You can wrap your LayoutBuilder() with Expanded() like this and it won't show an error.
return Container(
child: Column(
children: [
Text("Header"),
Expanded(
child: ListView.builder(
itemCount:50,
itemBuilder: (BuildContext context, int index) {
return Text("List Item $index");
},
),
),
Text("Footer"),
],
),
);
You can try the code here

Flutter - make scrollable a page that contains a DefaultTabController

I am developing an app and I have a page in which I show a block of data and below that I show the tabBars and TabBarView containing additional data. The problem I am struggling with is that if I try to wrap the widget "DefaultTabController" with "SingleChildScrollView" it throws an error and the page does not work.
I need to find a way to show the tabBars and TabBarView at the bottom of the page and make the entire page scrollable
I put the code:
In the build method I put 4 widgets inside the column
_showEventHeader shows a single image with a title
_showUserAndEventData shows plain text
_showTabs shows the tab headers
_showTabsContent shows the content of the tabs (images and comments)
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Theme.of(context).primaryColor,
body: Column(
children: [
..._showEventHeader(),
Container(
padding: EdgeInsets.all(15),
child: _showUserAndEventData()),
_showTabs(),
_showTabsContent(),
],
)
));
}
List<Widget> _showEventHeader() {
return [
SizedBox(
height: 20,
),
GestureDetector(
onTap: () {
if (Val.valStr(widget.evento.bannerUrl).isNotEmpty) {
Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
return FlypperFullImage(
imgURL: widget.evento.bannerUrl,
);
}));
}
},
child: Stack(
alignment: Alignment.bottomRight,
children: [
FlypperCustomImageNetWork(
imageURL: widget.evento.bannerUrl,
height: 200,
width: 200,
showAsRectangle: true,
fillWidth: true,
),
Container(
child: FlypperQrImage(
qrData: widget.evento.code,
size: 65,
),
)
],
),
),
SizedBox(
height: 20,
),
!_ticketsAvailable
? Text('$_noTicketAvailableMessage',
style: Theme.of(context).textTheme.headline2)
: SizedBox(
height: 1,
),
Card(
color: Theme.of(context).primaryColor,
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
Val.valStr(widget.evento.name).isNotEmpty
? Val.valStr(widget.evento.name)
: 'Sin nombre',
textAlign: TextAlign.justify,
style: Theme.of(context)
.textTheme
.headline1 /*FlypperStyleHelper.eventTitle(context)*/),
),
),
SizedBox(
height: 10,
),
];
}
Widget _showUserAndEventData() {
return SingleChildScrollView(
child: Container(
color: Theme.of(context).primaryColor,
child: Column(
children: [
SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
this.user != null
? /*FlypperCustomImageBase64(
imageBase64: this.user.profileImageUrl)*/
FlypperCustomImageNetWork(
imageURL: this.user.profileImageUrl,
keepImageCached: true,
height: 65,
width: 65,
)
: SizedBox(height: 1),
SizedBox(
height: 10,
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
this.user != null
? this.user.userName.isEmpty
? this.user.email
: this.user.userName
: '',
style: Theme.of(context).textTheme.headline1,
/* FlypperStyleHelper.eventUserData(context, 18),*/
),
Text(
this.user != null
? Val.valInt(this.user.followers).toString() +
' seguidores'
: '',
style: Theme.of(context).textTheme.bodyText1
/*FlypperStyleHelper.eventUserData(context, 15),*/
)
],
),
)
]),
_getEventDetailInfo(),
SizedBox(
height: 20,
),
_showBuyButton(),
SizedBox(
height: 10,
),
FlypperIconButton(
icon: Icons.location_on,
width: 150,
handlerFunction: () => _openMapWithCalculatedRoute(context),
),
Divider(
color: Colors.grey,
thickness: 2,
)
],
),
),
);
}
Widget _showTabs() {
return TabBar(
isScrollable: true,
labelStyle: Theme.of(context).textTheme.headline2,
tabs: [
Tab(
text: 'Fotos, videos...',
/*icon: Icon(Icons.event, color: Theme.of(context).buttonColor)*/
),
Tab(
text: 'Comentarios',
/*icon: Icon(Icons.attach_file, color: Theme.of(context).buttonColor),*/
),
],
);
}
Widget _showTabsContent() {
return Flexible(
child: TabBarView(
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
color: Theme.of(context).primaryColor,
child: Column(children: [_getDetailImage()]),
),
],
),
),
Container(child: Text('Comments section')) //comentarios, pendiente
// SingleChildScrollView(
// child: Container(
// color: Theme.of(context).primaryColor,
// child: Column(children: [_getDetailImage()]),
// ),
// ),
// Container(child: Text('Comments section')) //comentarios, pendiente
],
),
);
}
I also attached an screenshot so you can understand better what I am saying
Try this i have a give example and edit it some value :-
TabBar(
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('Tab 1'),
),
Tab(
child: Text('Investment'),
),
Tab(
child: Text('Your Earning'),
),
]),
And all Widget vale call in a List view Like this:-
_showEventHeader() {
return new Container(
height: 20,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
Column(
children: [])));}

Why can't I build the list?

I tried to build a list by taking the data I pulled from the database. But I do not see anything in any way, I get a white screen. I think the data I pulled is overlapping and preventing building lists but I couldn't find where the error is. What I'm trying to do is divide the Card by Row with 2 and write the data I pulled from the database on the left side of the Card. Write other data on the right.
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: _db.getEventsByOrder(widget.index),
builder: (context, snapshot) {
if (snapshot.data == null) {
return Container(
child: Center(child: Text("Loading.....")),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: const EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 16.0),
child: Card(
elevation: 25,
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Row(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text(
'${snapshot.data[index].title}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 28, fontFamily: 'Arvo'),
)),
Text(
"${snapshot.data[index].date} - ${snapshot.data[index].startTime == "null" ? " Tüm gün" : "${snapshot.data[index].startTime} - ${snapshot.data[index].finishTime}"}",
style: new TextStyle(
fontSize: 15, fontFamily: 'Arvo'),
),
Expanded(
child: Text(snapshot.data[index].desc,
maxLines: 2,
overflow: TextOverflow.ellipsis),
),
]),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: DropDown(Event(
id: snapshot.data[index].id,
title: snapshot.data[index].title,
date: snapshot.data[index].date,
startTime:
snapshot.data[index].startTime,
finishTime:
snapshot.data[index].finishTime,
desc: snapshot.data[index].desc,
isActive:
snapshot.data[index].isActive,
choice:
snapshot.data[index].choice))),
Container(
padding: EdgeInsets.only(top: 8.0),
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.blue),
child: Text(
"${DateTime.parse(snapshot.data[index].date).difference(DateTime.now()).inDays}\nKalan Gün",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25),
),
),
],
),
],
),
),
),
);
});
}
}),
);
}
You need to adjust the dimensions only.
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: _db.getEventsByOrder(widget.index),
builder: (context, snapshot) {
if (snapshot.data == null) {
return Container(
child: Center(child: Text("Loading.....")),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: const EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 16.0),
child: Card(
elevation: 25,
child: Container(
height: MediaQuery.of(context).size.height/4,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 2 - 16,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
'${snapshot.data[index].title}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 28),
),
Text(
"${snapshot.data[index].date} - ${snapshot.data[index].startTime == "null" ? " Tüm gün" : "${snapshot.data[index].startTime} - ${snapshot.data[index].finishTime}"}",
style: TextStyle(fontSize: 15),
),
Text(
snapshot.data[index].desc,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
Container(
width: MediaQuery.of(context).size.width / 2 - 32,
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 4 - 8,
child: DropDown(Event(
id: snapshot.data[index].id,
title: snapshot.data[index].title,
date: snapshot.data[index].date,
startTime: snapshot.data[index].startTime,
finishTime: snapshot.data[index].finishTime,
desc: snapshot.data[index].desc,
isActive: snapshot.data[index].isActive,
choice: snapshot.data[index].choice)),
),
],
),
),
),
);
});
}
}),
);
}
If there was even an overlapping problem, should be an error. Provide the debug info and try to move DropDown out of container to column
You could also close ROW in a CONTAINER

Updating single item on a Listview.builder widget in Flutter

so I have a list of users that is in a Listview.builder widget but my issue is that when I try to update one item on the list all the other items update as well.
I have a button that shows "Add friend" when I click on the button the message should change to "Invited", I have a string variable that holds the message so when I click on the button the string is updated from "Add friend" to "Invited", now when I click on button all the other button values change as well.
Here is my code:
class Friends extends StatefulWidget{
_FriendsState createState() => _FriendsState();
}
class _FriendsState extends State<Friends>{
List<String> nameList = [];
String btnText;
#override
Widget build(BuildContext context) {
bool showFriendList = false;
return Scaffold(
appBar: AppBar(
title: Text('Friends'),
actions: <Widget>[
IconButton(
onPressed: (){
},
icon: Icon(Icons.check, color: Colors.white,),
)
],
),
body:
Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
showFriendList? Column(
children: <Widget>[
Text('Find friends to add. Once they accept you can invite them to your challenge.', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),),
SizedBox(height: 45,),
Container(
width: MediaQuery.of(context).size.width,
child: RaisedButton(
child: Text('GO AND FIND FRIENDS', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14, color: Colors.white)),
onPressed: (){
setState(() {
showFriendList != showFriendList;
});
},
color: Theme.of(context).accentColor,
shape: RoundedRectangleBorder(side: BorderSide(color: Theme.of(context).accentColor),borderRadius: BorderRadius.circular(14)),
),
)
],
): Container(
height: MediaQuery.of(context).size.height,
child:friends(context) ,
)
],
) ,
)
);
}
Widget friends(BuildContext context){
return
ListView(
children: <Widget>[
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white
),
child: TextField(
decoration:InputDecoration(
hintText: 'Enter User\'s name',
border: InputBorder.none,),
),
),
/* noRequest== true? SizedBox(height: 0,):friendRequest(context),
noRequest== true? SizedBox(height: 0,): Container(
margin: EdgeInsets.all(10),
height: 60,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.start,
children: <Widget>[Text('Your friends', style: TextStyle(fontSize: 16, color: Theme.of(context).textSelectionColor,)) ],),
),*/
Container(
height: 0.5,
color: Colors.grey,
),
ListView.builder(
shrinkWrap: true,
itemCount: users.length,
itemBuilder: (BuildContext context, int index){
return
Container(
padding: EdgeInsets.only(left: 6),
height:80 ,
child:
Column(
children: <Widget>[
Row(
children: <Widget>[
users[index].profileUrl != null? CircleAvatar(child: Image.asset(users[index].profileUrl),): Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.white70,
shape: BoxShape.circle,
image: DecorationImage(
image:AssetImage('assets/plus.png') //NetworkImage(renderUrl ??'assets/img.png')
)
),
),
SizedBox(width: 30,),
Expanded(
flex: 1,
child:
Container(
child:
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 12,),
users[index].fullName != null? Text( users[index].fullName, style: TextStyle(fontSize: 18)): Text('Anjelika Thompson', style: TextStyle(fontSize: 18),),
SizedBox(height: 12,),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(child: Icon(Icons.location_on),alignment: Alignment.topLeft,),
SizedBox(width: 10,),
users[index].distance_KM.toString() != null ? Text( users[index].distance_KM.toString()):Text('48.7 km')
]),
],
),
],
)
),
),
SizedBox(width: 0,),
//Icon(Icons.check,color: Colors.red,size: 40,)
FlatButton(
child: Text(btnText==null? 'ADD FRIEND': btnText, style: TextStyle(color: Color(0xff7667e5)),),
onPressed: () {
nameList.add(users[index].fullName);
setState(() {
btnText = 'INVITED';
});
},
)
],
),
Container(
height: 0.5,
color: Colors.grey,
)
],
) ,
);
}
// final item = feeds[index];
)
],
);
}
}
From my class, I have a string value called "btnText" that I use to set the new value. but at the moment once I click on one button to change from "Add friend" to "Invited" all other button Text in the listview change as well.
Please I need help figuring out what is the problem
#Chidinma, you can add a check to see if user is in your nameList,
FlatButton(
child: Text(btnText==null || !nameList.contains(users[index].fullName) ? 'ADD FRIEND': btnText, style: TextStyle(color: Color(0xff7667e5)),),
onPressed: () {
nameList.add(users[index].fullName);
setState(() {
btnText = 'INVITED';
});
................
This is just to give you an idea. A better solution would be to create a selected column in users table and save selected state as bool value. If you don't have database then i'd recommend creating indexList like nameList and save the index of invited friends and check to see if index is in the indexList like i've done with the nameList instead.
Method
inviteButtonStateFunction(index){
for (var e in invitedPeopleListIndex) {
if(e == index){
return Text("Invited");
}
}
return Text("Invite");
}
Usage
child: TextButton(
onPressed: () {
if(invitedPeopleListIndex.contains(index)){
invitedPeopleListIndex.remove(index);
}else{
invitedPeopleListIndex.add(index);
}
print(invitedPeopleListIndex);
print(invitedPeopleList);
},
child: inviteButtonStateFunction(index), // Show the text here
)

What is best way to remove overflowing by a lot of pixels in Flutter?

I have Stepper in my app, and I have problems with placing textfield on screen, when I want to text some text in textfield, appears keyboard and over it shows me that:
A RenderFlex overflowed by 139 pixels on the bottom.
I read some articles and understood, that I have to use FittedBox, but I dunno how to use it with best way. How can I reach my goal?
Code:
#override
Widget build(BuildContext context) {
globalHeight = (MediaQuery.of(context).size.height) * 0.85;
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Container(
decoration: BoxDecoration(color: colorsBackround[_currentPage]),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: globalHeight,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: <Widget>[
// some code
Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image(
image: AssetImage(
itemIcon[_currentPage],
),
height: 300.0,
width: 300.0,
),
Text(
'Укажите ваш возраст',
style: kTitleStyle,
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: 50.0,
child: Padding(
padding: EdgeInsets.only(
top: 20.0,
left: 20,
right: 20,
bottom: MediaQuery.of(context)
.viewInsets
.bottom),
child: TextField(
controller: ageController,
keyboardType: TextInputType.number,
onChanged: (text) {
setState(() {
if (text.isNotEmpty) {
inputs[1] = true;
} else {
inputs[1] = false;
}
});
},
decoration: InputDecoration(
labelText: 'Возраст',
),
style: TextStyle(fontSize: 18.5),
)),
),
],
),
),
),
//some code
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
_currentPage != _numPages - 1
? Expanded(
child: Container(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.bottomLeft,
child: FlatButton(
onPressed: () {
_pageController.previousPage(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.arrow_back,
color: Colors.white,
size: 26.0,
),
SizedBox(width: 10.0),
Text(
'Назад',
style: TextStyle(
fontFamily: 'Century Gothic',
color: Colors.white,
fontSize: 14.5,
),
),
],
),
),
)),
Expanded(
child: Align(
alignment: FractionalOffset.bottomRight,
child: FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Дальше',
style: TextStyle(
fontFamily: 'Century Gothic',
color: Colors.white,
fontSize: 14.5,
),
),
SizedBox(width: 10.0),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 26.0,
),
],
),
),
)),
],
)))
: Text(''),
],
),
),
),
),
bottomSheet: _currentPage == _numPages - 1
? Container(
height: 75.0,
width: double.infinity,
color: Theme.of(context).scaffoldBackgroundColor,
child: GestureDetector(
onTap: () => print('Get started'),
child: Center(
child: Padding(
padding: EdgeInsets.only(bottom: 15.0),
child: Text(
'Начать',
style: TextStyle(
fontFamily: 'Century Gothic',
color: Colors.white,
fontSize: 21.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
)
: Text(''),
);
}
}
There is no direct solution to prevent overflowing issues, it depends on your current code. So, here you use
Add to your Scaffold
resizeToAvoidBottomInset: false
Wrap your widget in SingleChildScrollView
SingleChildScrollView(
child: YourColumn(),
)
That happens because when opening the keyboard, the body is resized to avoid the keyboard appear over the text field, and since your content isn't scrollable the content of the body gets overflowed. Check this property of the Scaffold:
/// If true the [body] and the scaffold's floating widgets should size
/// themselves to avoid the onscreen keyboard whose height is defined by the
/// ambient [MediaQuery]'s [MediaQueryData.viewInsets] `bottom` property.
///
/// For example, if there is an onscreen keyboard displayed above the
/// scaffold, the body can be resized to avoid overlapping the keyboard, which
/// prevents widgets inside the body from being obscured by the keyboard.
///
/// Defaults to true.
final bool resizeToAvoidBottomInset;
If you put that to false, the body won't be resized so the content won't be overflowed.
If you leave it as default, you need to make the body scrollable. In your case, you could change the root Column for a ListView and you will need to remove the Expanded wrap of the third item of the column.
But I recommend you to try to simplify the structure of the widgets.
Wrap your widget with a SingleChildScroll widget and that should work and solve the overflow issue