'Flutter: Clicking on TextFormField redirects me back to Home:
I only have TextFormFields in 2 places in my app. Once in my Login Widget and second in my PinWidget, which is meant to set a personal pin.
Home: is always the login widget. There the first function redirectIfLoggedIn is executed which redirects to another widget if a flag is set in the sharedPreferences that you are already logged in.
In the Login Widget everything works fine but in the PinWidget I am redirected to Home as soon as I click on the TextFormField.
Login Widget:
import 'package:global_jets/custom_code/actions/api.dart';
import 'package:global_jets/custom_code/actions/notification_api.dart';
import '../components/customer_logo_header_widget.dart';
import '../components/powered_by_widget.dart';
import '../flutter_flow/flutter_flow_theme.dart';
import '../flutter_flow/flutter_flow_widgets.dart';
import '../main.dart';
import 'package:flutter/material.dart';
import 'package:global_jets/custom_code/globals.dart' as globals;
import 'package:global_jets/custom_code/actions/functions.dart';
class LoginWidget extends StatefulWidget {
const LoginWidget({Key key}) : super(key: key);
@override
_LoginWidgetState createState() => _LoginWidgetState();
}
class _LoginWidgetState extends State<LoginWidget> {
TextEditingController textController1;
TextEditingController textController2;
final scaffoldKey = GlobalKey<ScaffoldState>();
final api = new ApiController();
@override
void initState() {
super.initState();
textController1 = TextEditingController();
textController2 = TextEditingController();
}
@override
Widget build(BuildContext context) {
redirectIfLoggedIn(context);
return Scaffold(
key: scaffoldKey,
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: [
Align(
alignment: AlignmentDirectional(0, -1),
child: CustomerLogoHeaderWidget(),
),
Align(
alignment: AlignmentDirectional(0, -0.35),
child: Container(
width: MediaQuery.of(context).size.width,
height: 250,
decoration: BoxDecoration(
color: Color(0x00EEEEEE),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(
'assets/images/login-background.jpg',
).image,
),
),
),
),
Align(
alignment: AlignmentDirectional(0, 0.5),
child: Container(
width: MediaQuery.of(context).size.width * 0.95,
height: 180,
decoration: BoxDecoration(
color: Color(0x00EEEEEE),
),
child: Stack(
children: [
TextFormField(
controller: textController1,
obscureText: false,
decoration: InputDecoration(
hintText: 'Benutzername',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 1,
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 1,
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
style: FlutterFlowTheme.of(context).bodyText1.override(
fontFamily: 'Square',
color: Colors.black,
fontWeight: FontWeight.normal,
useGoogleFonts: false,
),
textAlign: TextAlign.center,
),
Align(
alignment: AlignmentDirectional(0, -0.2),
child: TextFormField(
controller: textController2,
obscureText: false,
decoration: InputDecoration(
hintText: 'Passwort',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x98000000),
width: 1,
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x98000000),
width: 1,
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
style:
FlutterFlowTheme.of(context).bodyText1.override(
fontFamily: 'Square',
// color: Colors.black,
fontWeight: FontWeight.normal,
useGoogleFonts: false,
),
textAlign: TextAlign.center,
),
),
Align(
alignment: AlignmentDirectional(-0.01, 0.68),
child: FFButtonWidget(
onPressed: () async {
// NotificationsApi.showNotification(
// title: 'Tizian Thost',
// body: 'lorem ipsum',
// payload: 'tizian.thost',
// );
bool success = false;
success = await api.login(textController1.text, textController2.text);
if (success) {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
NavBarPage(initialPage: 0),
),
);
}
},
text: 'Login',
options: FFButtonOptions(
width: 130,
height: 40,
color: Color(0xFFFFD457),
textStyle:
FlutterFlowTheme.of(context).subtitle2.override(
fontFamily: 'Square',
color: Colors.white,
fontWeight: FontWeight.normal,
useGoogleFonts: false,
),
borderSide: BorderSide(
color: Colors.transparent,
width: 1,
),
borderRadius: 12,
),
),
),
],
),
),
),
Align(
alignment: AlignmentDirectional(0, 1),
child: PoweredByWidget(),
),
],
),
),
),
);
}
}
void redirectIfLoggedIn(context) async {
globals.isLoggedIn = await isLoggedIn();
if (globals.isLoggedIn) {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NavBarPage(initialPage: 0),
),
);
}
}
Main:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:global_jets/login/login_widget.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:global_jets/settings/pin/pin.dart';
import 'flutter_flow/flutter_flow_theme.dart';
import 'flutter_flow/internationalization.dart';
import 'clock/clock_widget.dart';
import 'user/user_widget.dart';
import 'login/login_widget.dart';
import 'applications/applications_widget.dart';
import 'package:awesome_notifications/awesome_notifications.dart';
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// globals.isLoggedIn = await isLoggedIn();
// await setPin();
AwesomeNotifications().initialize(
// set the icon to null if you want to use the default app icon
null,
[
NotificationChannel(
channelGroupKey: 'basic_channel_group',
channelKey: 'basic_channel',
channelName: 'Basic notifications',
channelDescription: 'Notification channel for basic tests',
defaultColor: Color(0xFF9D50DD),
ledColor: Colors.white)
],
// Channel groups are only visual and are not required
channelGroups: [
NotificationChannelGroup(
channelGroupkey: 'basic_channel_group',
channelGroupName: 'Basic group'
)
],
debug: true
);
AwesomeNotifications().isNotificationAllowed().then((isAllowed) {
if (!isAllowed) {
// This is just a basic example. For real apps, you must show some
// friendly dialog box before call the request method.
// This is very important to not harm the user experience
AwesomeNotifications().requestPermissionToSendNotifications();
}
});
runApp(MyApp());
}
class MyApp extends StatefulWidget {
// This widget is the root of your application.
@override
State<MyApp> createState() => _MyAppState();
MyApp({this.isLoggedIn, this.homePage});
final isLoggedIn;
final homePage;
static _MyAppState of(BuildContext context) => context.findAncestorStateOfType<_MyAppState>();
}
class _MyAppState extends State<MyApp> {
Locale _locale;
ThemeMode _themeMode = FlutterFlowTheme.themeMode;
void setLocale(Locale value) => setState(() => _locale = value);
void setThemeMode(ThemeMode mode) => setState(() {
_themeMode = mode;
FlutterFlowTheme.saveThemeMode(mode);
});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Global Jets',
localizationsDelegates: [
FFLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
locale: _locale,
supportedLocales: const [Locale('en', '')],
theme: ThemeData(brightness: Brightness.light),
darkTheme: ThemeData(brightness: Brightness.dark),
navigatorKey: navigatorKey,
themeMode: _themeMode,
home: LoginWidget(),
);
}
}
class NavBarPage extends StatefulWidget {
NavBarPage({Key key, this.initialPage}) : super(key: key);
final int initialPage;
@override
_NavBarPageState createState() => _NavBarPageState();
}
/// This is the private State class that goes with NavBarPage.
class _NavBarPageState extends State<NavBarPage> {
int _currentPage = 0;
@override
void initState() {
super.initState();
_currentPage = widget.initialPage ?? _currentPage;
}
@override
Widget build(BuildContext context) {
final List<Widget> _children = [
ClockWidget(),
UserWidget(),
ApplicationsWidget(),
PinWidget(),
];
// final currentIndex = tabs.keys.toList().indexOf(_currentPage);
return Scaffold(
body: IndexedStack(
index: _currentPage,
children: _children,
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentPage,
onTap: (i) => setState(() => _currentPage = i),
backgroundColor: Color(0xFF313131),
selectedItemColor: Color(0xFFFFD457),
unselectedItemColor: Color(0x8AFFFFFF),
showSelectedLabels: true,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.clock,
size: 24,
),
label: 'Arbeitszeit',
tooltip: '',
),
BottomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.userTie,
size: 24,
),
label: 'Mein Konto',
tooltip: '',
),
BottomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.solidFileAlt,
size: 24,
),
label: 'Anträge',
tooltip: '',
),
BottomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.solidFileAlt,
size: 24,
),
label: 'Einstellungen',
tooltip: '',
)
],
),
);
}
}
Pin Widget:
import 'package:global_jets/components/customer_logo_header_widget.dart';
import 'package:global_jets/components/powered_by_widget.dart';
import 'package:global_jets/flutter_flow/flutter_flow_icon_button.dart';
import 'package:global_jets/flutter_flow/flutter_flow_theme.dart';
import 'package:global_jets/flutter_flow/flutter_flow_widgets.dart';
import 'package:flutter/material.dart';
class PinWidget extends StatefulWidget {
const PinWidget({Key key}) : super(key: key);
@override
_PinWidgetState createState() => _PinWidgetState();
}
class _PinWidgetState extends State<PinWidget> {
TextEditingController textController;
final scaffoldKey = GlobalKey<ScaffoldState>();
static GlobalKey<FormState> _pinFormKey = new GlobalKey<FormState>();
@override
void initState() {
super.initState();
textController = TextEditingController();
_pinFormKey = GlobalKey<FormState>();
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
backgroundColor: Color(0xFF313131),
automaticallyImplyLeading: false,
leading: FlutterFlowIconButton(
borderColor: Colors.transparent,
borderRadius: 30,
borderWidth: 1,
buttonSize: 60,
icon: Icon(
Icons.arrow_back_rounded,
color: Colors.white,
size: 30,
),
onPressed: () async {
Navigator.pop(context);
},
),
title: Text(
'Arbeitszeit Verlauf',
style: FlutterFlowTheme.of(context).title2.override(
fontFamily: 'Square',
color: Colors.white,
fontSize: 22,
useGoogleFonts: false,
),
),
actions: [],
centerTitle: true,
elevation: 2,
),
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
body: SafeArea(
child: Stack(
children: [
Align(
alignment: AlignmentDirectional(0, -0.15),
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
),
child: Stack(
children: [
Form(
key: _pinFormKey,
autovalidateMode: AutovalidateMode.disabled,
child: Stack(
children: [
Align(
alignment: AlignmentDirectional(0, 0),
child: TextFormField(
controller: textController,
obscureText: false,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 1,
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 1,
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Poppins',
color: Colors.black,
),
),
),
Align(
alignment: AlignmentDirectional(0, 0.9),
child: FFButtonWidget(
onPressed: () {
print('Button pressed ...');
},
text: 'Ändern',
options: FFButtonOptions(
width: 130,
height: 40,
color: Color(0xFFFFD457),
textStyle: FlutterFlowTheme.of(context)
.subtitle2
.override(
fontFamily: 'Poppins',
color: Colors.white,
),
borderSide: BorderSide(
color: Colors.transparent,
width: 1,
),
borderRadius: 12,
),
),
),
],
),
),
Align(
alignment: AlignmentDirectional(0, -0.6),
child: Text(
'Pin festlegen',
style: FlutterFlowTheme.of(context).bodyText1.override(
fontFamily: 'Square',
useGoogleFonts: false,
),
),
),
],
),
),
),
Align(
alignment: AlignmentDirectional(0, 0),
child: PoweredByWidget(),
),
CustomerLogoHeaderWidget(),
],
),
),
);
}
}
I have already searched Google and Stackoverflow, also found similar problems but no solution.
I have experimented with different variations of FormKeys with final and static but nothing seems to work.
In other places I have DateTimePicker, but the problem does not occur with them.
I should add that the base of the app was created with Flutterflow but has been heavily modified.
Solution 1:[1]
in your first picture it looks like everything is wrapped in a gesture detector that may be an issue
Solution 2:[2]
bro you gotta stop using flutter flow or you have to find alternatives every time when you want to use flutter f
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | flutterloop |
| Solution 2 | Anonymous |