Menu
I've got a new transaction screen with several textfields and a container at the bottom for shortcuts:
And when i trigger a textfield the grey container moves up as well:
Here is my code for the screen:
//import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
//import 'package:flutter/services.dart';
import '../items/icon_picket_item.dart';
import '../items/select_transaction_item.dart';
import '../providers/user_transactions.dart';
import '../providers/icon_auswahl.dart';
import '../providers/account_type.dart';
import '../providers/user_settings/single_multiple_acc.dart';
import 'package:provider/provider.dart';
import '../storag/locale.dart';
import '../storag/foundation.dart';
import '../my_icons.dart';
class NewTransactionScreen extends StatefulWidget {
static const routeName = '/new-transaction';
@override
_NewTransactionScreenState createState() => _NewTransactionScreenState();
}
class _NewTransactionScreenState extends State<NewTransactionScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final _titleController = TextEditingController(text: '');
final _amountController = TextEditingController(text: '-10.00');
final _accountController = TextEditingController();
final _notesController = TextEditingController();
final _repeatController = TextEditingController();
DateTime _selectedDate;
Color _correct = Colors.white54;
final data = [];
void _colorCorrect() {
final enteredTitle = _titleController.text;
final enteredAmount = _amountController.text;
final enteredAccount = _accountController.text;
final enteredRepeat = _repeatController.text;
Color color;
if (enteredTitle.isEmpty ||
enteredAmount.isEmpty ||
enteredAccount.isEmpty ||
enteredRepeat.isEmpty) {
color = Colors.white54;
} else {
color = Colors.white;
}
setState(() {
_correct = color;
});
}
void _submitData(String choiceId, NewTransactions transactions, iconData,
GeldKonto kontoss) {
//onSubmitted gives you a string
if (_amountController.text.isEmpty) {
return;
}
final enteredTitle = _titleController.text;
final enteredAmount = _amountController.text;
final enteredAccount = _accountController.text;
final enteredNotes = _notesController.text;
final enteredRepeat = _repeatController.text;
Icon enteredIcon = iconData.taken;
if (enteredTitle.isEmpty ||
enteredAmount.isEmpty ||
enteredAccount.isEmpty ||
enteredRepeat.isEmpty) {
return; //means code stops here and addTx doesnt run
} else {
transactions.addNewtransaction(
xTitle: enteredTitle,
xAmount: double.parse(enteredAmount) <= 0
? double.parse(enteredAmount) * (-1)
: double.parse(enteredAmount),
xchosenDate: _selectedDate == null ? DateTime.now() : _selectedDate,
xAccountType: enteredAccount,
xNotes: enteredNotes,
xRepeat: enteredRepeat,
xIcon: enteredIcon,
xId: DateTime.now().toString(),
xchoiceId: choiceId);
}
Navigator.of(context).pop(context);
// .pop closes modalsheet , you have the property contexyt cause of extends state
}
Container _buildTransactionRow(
{Text typedText,
Function onPress,
comparisonStuff,
Icon icon,
double iconSpace,
double iconAfterSpace}) {
final mediaQuery = MediaQuery.of(context);
return Container(
// padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(height: 1, width: iconSpace),
icon,
SizedBox(height: 1, width: iconAfterSpace), //25
SizedBox(
width: mediaQuery.size.width * 0.75,
child: GestureDetector(
onTap: onPress,
child: Column(
//crossAxisAlignment: CrossAxisAlignment.,
children: <Widget>[
SizedBox(height: 17, width: 1),
SizedBox(
width: mediaQuery.size.width * 0.75,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 1,
width: 4,
),
typedText
],
),
),
SizedBox(height: 10, width: mediaQuery.size.width * 0.04),
SizedBox(
height: 1,
width: mediaQuery.size.width * 0.75,
child: const Divider(
color: Colors.white54,
thickness: 1,
),
),
],
),
),
),
],
),
);
}
Widget _buildAppBar(String pageTitle, NewTransactions transactions,
GeldKonto kontoss, String choiceId) {
return AppBar(
automaticallyImplyLeading: false,
leading: isIos == true
? IconButton(
icon: Icon(CupertinoIcons.back, size: 30, color: Colors.white),
onPressed: () => Navigator.of(context).pop(context),
)
: IconButton(
icon: Icon(Icons.arrow_back, size: 30, color: Colors.white),
onPressed: () => Navigator.of(context).pop(context),
),
centerTitle: true,
title: Text(
pageTitle,
style: const TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.w400,
),
textAlign: TextAlign.end,
),
actions: <Widget>[
Consumer<IconAuswahl>(
builder: (ctx, iconData, child) => IconButton(
padding: EdgeInsetsDirectional.only(
start: 15,
end: 25,
top: 5,
bottom: 0,
),
icon: Icon(
MyIcon.correct,
size: 45,
color: _correct,
),
onPressed: () =>
_submitData(choiceId, transactions, iconData, kontoss),
),
),
],
backgroundColor: Color(0xffb00374a),
);
}
Widget _buildColumn(
BuildContext context, AppBar appBar, local, String choiceId) {
final mediaQuery = MediaQuery.of(context);
return Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [Colors.black, Color(0xffb00374a)],
),
),
),
Positioned(
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.08,
color: Colors.grey),
),
SingleChildScrollView(
child: Container(
height: (mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top ) * 1.05 ,
padding: EdgeInsets.only(
top: 10,
left: 20,
right: 10,
bottom:0,
//
// so that the whole thing always move +10
),
child: Consumer<SinlgeOrMultiple>(
builder: (_, data, __) => data.multipleAcc == true
? Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// CupertinoTextField(
// ),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? 'Bankkonto'
: 'Mein Ausgewähltes Zeug',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.account, size: 38),
iconSpace: 3,
iconAfterSpace: 20,
onPress: () {}),
Row(children: <Widget>[
SizedBox(width: 3.5),
choiceId == '0'
? const Icon(
MyIcon.paying,
color: Colors.white,
size: 25,
)
: const Icon(
MyIcon.earning,
color: Colors.white,
size: 43,
),
const SizedBox(width: 33),
SelectTransactionItem(
choiceId == '0' //id of new outcome
? '-${oCcyy.format(0)}'
: '${oCcyy.format(0)}',
_amountController,
false,
_colorCorrect),
]),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconPicked(_scaffoldKey, choiceId),
const SizedBox(
width:
14),
SelectTransactionItem(
'Titel',
_titleController,
true,
_colorCorrect),
],
),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? 'Jede 2 Woche'
: 'Ausgewählter Stuff',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.runningtime, size: 40),
iconSpace: 0,
iconAfterSpace: 20,
onPress: () {}),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? '${DateFormat.yMd(local).format(DateTime.now())}'
: '${DateFormat.yMMMd().format(_selectedDate)}',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.calender, size: 39),
iconSpace: 3,
iconAfterSpace: 18,
onPress: () {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return SizedBox(
height: MediaQuery.of(context)
.copyWith()
.size
.height /
3,
child: CupertinoDatePicker(
//backgroundColor: Color(0xffb00374a),
initialDateTime: DateTime.now(),
onDateTimeChanged:
(DateTime pickedDate) {
if (pickedDate == null) {
return;
}
setState(() {
_selectedDate = pickedDate;
});
},
// use24hFormat: true,
maximumDate: DateTime.now(),
minimumYear: 2010,
maximumYear: 2020,
//minuteInterval: 1,
mode: CupertinoDatePickerMode.date,
),
);
});
},
),
Row(
children: <Widget>[
const SizedBox(width: 3.5),
const Icon(
MyIcon.notes,
color: Colors.white,
size: 37,
),
const SizedBox(width: 20),
SelectTransactionItem('Notizen', _notesController,
false, _colorCorrect),
],
),
Container(
width: 0.1,
height: MediaQuery.of(context).size.height * 0.08,
color: Colors.transparent),
])
: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(children: <Widget>[
const SizedBox(width: 3.5),
choiceId == '0'
? const Icon(
MyIcon.paying,
color: Colors.white,
size: 25,
)
: const Icon(
MyIcon.earning,
color: Colors.white,
size: 43,
),
const SizedBox(width: 33),
SelectTransactionItem(
choiceId == '0' //id of new outcome
? '-${oCcyy.format(0)}'
: '${oCcyy.format(0)}',
_amountController,
false,
_colorCorrect),
]),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconPicked(_scaffoldKey, choiceId),
const SizedBox(
width:
14),
SelectTransactionItem(
'Titel',
_titleController,
true,
_colorCorrect),
],
),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? 'Jede 2 Woche'
: 'Ausgewählter Stuff',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.runningtime, size: 40),
iconSpace: 0,
iconAfterSpace: 20,
onPress: () {}),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? '${DateFormat.yMd(local).format(DateTime.now())}'
: '${DateFormat.yMMMd().format(_selectedDate)}',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.calender, size: 39),
iconSpace: 3,
iconAfterSpace: 18,
onPress: () {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return SizedBox(
height: MediaQuery.of(context)
.copyWith()
.size
.height /
3,
child: CupertinoDatePicker(
//backgroundColor: Color(0xffb00374a),
initialDateTime: DateTime.now(),
onDateTimeChanged:
(DateTime pickedDate) {
if (pickedDate == null) {
return;
}
setState(() {
_selectedDate = pickedDate;
});
},
// use24hFormat: true,
maximumDate: DateTime.now(),
minimumYear: 2010,
maximumYear: 2020,
//minuteInterval: 1,
mode: CupertinoDatePickerMode.date,
),
);
});
},
),
Row(
children: <Widget>[
const SizedBox(width: 3.5),
const Icon(
MyIcon.notes,
color: Colors.white,
size: 37,
),
const SizedBox(width: 20),
SelectTransactionItem('Notizen', _notesController,
false, _colorCorrect),
],
),
Container(
width: 0.1,
height: MediaQuery.of(context).size.height * 0.08,
color: Colors.transparent),
])),
),
),
]);
}
@override
Widget build(BuildContext context) {
var local = Localizations.localeOf(context).toString();
final routeArgs =
ModalRoute.of(context).settings.arguments as Map<String, String>;
final _pageTitle = routeArgs['pageTitle'];
final _choiceId = routeArgs['id'];
final transactions = Provider.of<NewTransactions>(context, listen: false);
final kontoss = Provider.of<GeldKonto>(context, listen: false);
final PreferredSizeWidget appBar =
_buildAppBar(_pageTitle, transactions, kontoss, _choiceId);
return
// SafeArea(
// child:
Scaffold(
key: _scaffoldKey,
appBar: appBar,
// body: Stack(
// children: <Widget>[
body: _buildColumn(context, appBar, local, _choiceId),
//),
);
}
}It is fine when i open the upper textfield but the container overlap when opening the last textfield. I can scroll up to see the notes ,,textfield'', but it looks ugly when I open the notes ,,textfield'' and the thing is overlapping. Is there a way to move the textfield up automatically or just preventing that the Container is pushed up as well?
I tried to put the padding of the textfield column Container to + 10, but it squeezed the whole page.
padding: EdgeInsets.only(
top: 10,
left: 10,
right: 10,
bottom: MediaQuery.of(context).viewInsets.bottom +
10, // so that the whole thing always move +10
),
Do you have any advice to solve the problem?
790
Simply add " resizeToAvoiceBottomInset " to " false " to prevent widget resizing on the keyboard popup. When you don't keep this property to false, you may experience like below: In this way, you can prevent shrinking or resizing of widgets while the keyboard is active on the Flutter app.
The short answer is that we cannot; at least not using widgets alone. The reason is that in Flutter, widgets are only short-lived immutable blueprints of our content. The Flutter engine uses those blueprints to layout and paint our actual content on the screen, which lives in a separate place called the render tree.
To prevent the keyboard from overlaying widgets, on screens where you need it, I suggest the following approach, where is the height of SingleChildScrollView reduced to the height of the available space. In this case, SingleChildScrollView also scrolls to the focused widget.
To prevent the soft keyboard from covering your TextField while the user is typing, you can wrap your main widget with SingleChildScrollView. In case you place some text fields inside a bottom sheet and want to avoid the soft keyboard overlapping the text fields, see this example: Modal Bottom Sheet with TextFields inside.
Try adding resizeToAvoidBottomInset: false to your scaffold
105
Try wrapping Scaffold widget with a Stack and then put the Container widget after Scaffod
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
