Problem
I have a Flutter app with a log in page. When I run the app in debug mode, the log in page is rendered properly when the app is opened. But when I build a apk release of the app with flutter build apk --release
, install it and then open the app in the emulator, the login page is not rendered properly. See screenshots below.
Running in debug mode, properly rendered:
Running the release build, not completely rendered:
Code
Login page code:
// @dart=2.9
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
// import 'package:myapp/helpers/FCMHelper.dart';
import 'package:myapp/helpers/SecureStorageHelper.dart';
import 'package:myapp/helpers/SharedPreferencesHelper.dart';
import 'package:myapp/models/LoginModel.dart';
import 'package:http/http.dart' as http;
import 'package:myapp/models/Token.dart';
import 'package:myapp/globals.dart' as globals;
import 'package:myapp/models/UserAndTokenModel.dart';
import 'package:myapp/pages/home_page.dart';
import 'package:myapp/pages/reset_password_page.dart';
import 'package:swipedetector/swipedetector.dart';
import 'package:url_launcher/url_launcher.dart';
import '../home_page.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
String loginResponse = "";
SecureStorageHelper secureStorage;
bool rememberMe;
bool isFirstBuild;
bool isKeyboardVisible = false;
double displayWidth;
FocusNode emailFocus;
FocusNode passwordFocus;
KeyboardVisibilityController keyboardVisibilityController;
@override
void initState() {
init();
delayedInit();
super.initState();
}
init() {
emailFocus = new FocusNode();
passwordFocus = new FocusNode();
displayWidth = 1;
rememberMe = false;
addKeyBoardListener();
secureStorage = new SecureStorageHelper();
}
delayedInit() {
Future.delayed(Duration.zero, () {
getReemberMe();
tryFillUserCredentials();
tryAutoLogin();
});
}
getReemberMe() async {
rememberMe =
await SharedPreferencesHelper.getBool("myapp_remember_me");
setState(() {
rememberMe = rememberMe ?? false;
});
}
tryFillUserCredentials() async {
var username = await secureStorage.get("myapp_email");
var password = await secureStorage.get("myapp_password");
setState(() {
_usernameController.text = username;
_passwordController.text = password;
});
}
@override
Widget build(BuildContext context) {
hideSystemOverlay();
setDisplayDimensions();
return SwipeDetector(
onSwipeDown: onSwipeDown,
child: GestureDetector(
onTap: onScaffoldTap,
child: Scaffold(
resizeToAvoidBottomInset: true,
body: SafeArea(
child: Stack(
children: [
buildControlsLayer(),
buildPolicyLayer(),
buildVersionLayer()
],
),
),
),
));
}
buildLogo(int inFlex) {
return Flexible(
flex: inFlex,
child: Image.asset(
'assets/myapp_logo.png',
height: MediaQuery.of(context).size.height * 0.20,
),
);
}
rememberMeChange(bool newValue) {
setState(() {
rememberMe = newValue;
});
}
privacyPolicyTapped() {
resetFocus();
launch("https://www.myteam.se/policy.html");
}
void resetPasswordPressed() {
resetFocus();
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ResetPasswordPage()),
);
}
clearUserCredentialTextfields() {
setState(() {
_usernameController.clear();
_passwordController.clear();
});
}
void loggaInPressed() async {
resetFocus();
SharedPreferencesHelper.setBool("myapp_remember_me", rememberMe);
if (!rememberMe)
deleteUserCredentials();
else
storeUserCredentials(_usernameController.text, _passwordController.text);
var loginModel =
new LoginModel(_usernameController.text, _passwordController.text);
var response0 = await postLogin(loginModel);
if (response0.statusCode == 200) {
if (!rememberMe) clearUserCredentialTextfields();
setState(() {
loginResponse = "";
});
var loginToken = Token.fromJson(json.decode(response0.body));
globals.loginToken = loginToken;
var response1 = await getUserToken(loginToken.token);
if (response1.statusCode == 200) {
var userAndToken =
UserAndTokenModel.fromJson(json.decode(response1.body));
var userToken = new Token(token: userAndToken.token);
var userModel = userAndToken.userModel;
globals.userToken = userToken;
globals.userModel = userModel;
if (rememberMe) storeTokens(loginToken.token, userToken.token);
// var fcmHelper = new FCMHelper();
// fcmHelper.configureFCM(context);
// fcmHelper.registerFCMToken(userModel);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
} else
setState(() {
loginResponse = "Fel uppstod vid inloggning.";
});
} else
setState(() {
loginResponse = "Felaktig email eller lösenord.";
});
}
storeUserCredentials(String email, String password) {
secureStorage.set("myapp_email", email);
secureStorage.set("myapp_password", password);
}
storeTokens(String loginToken, String userToken) {
secureStorage.set("myapp_login_token", loginToken);
secureStorage.set("myapp_user_token", userToken);
}
deleteUserCredentials() {
secureStorage.delete("myapp_email");
secureStorage.delete("myapp_password");
secureStorage.delete("myapp_login_token");
secureStorage.delete("myapp_user_token");
}
Future<http.Response> postLogin(LoginModel loginModel) {
String data = json.encode(loginModel);
return http.post(
Uri.parse(globals.apiBaseUrl + "authentication/authenticate_mobile"),
body: data,
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
});
}
Future<http.Response> postFCMToken(String data) {
var userToken = globals.userToken.token;
return http.post(Uri.parse(globals.apiBaseUrl + "/user/set_fcm_token"),
body: data,
headers: {
'Content-type': 'application/json',
'Accept': 'application/json',
"Authorization": "Bearer $userToken"
});
}
Future<http.Response> getUserToken(String loginToken) {
return http
.get(Uri.parse(globals.apiBaseUrl + "user/get_by_token"), headers: {
'Content-type': 'application/json',
'Accept': 'application/json',
"Authorization": "Bearer $loginToken"
});
}
tryAutoLogin() async {
var loginToken = await secureStorage.get("myapp_login_token");
if (loginToken != null) autoLogin();
}
autoLogin() async {
var loginToken = await secureStorage.get("myapp_login_token");
var response = await getUserToken(loginToken);
if (response.statusCode == 200) {
var userAndToken = UserAndTokenModel.fromJson(json.decode(response.body));
var userToken = new Token(token: userAndToken.token);
var userModel = userAndToken.userModel;
globals.userToken = userToken;
globals.userModel = userModel;
// var fcmHelper = new FCMHelper();
// fcmHelper.configureFCM(context);
// fcmHelper.registerFCMToken(userModel);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
} else
showMessageDialog(
"Inloggningssessionen utgången", "Logga in igen med dina uppgifter.");
}
void showMessageDialog(String title, String body) {
try {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text(title),
content: new Text(body),
);
});
} catch (e) {
print(e.toString());
}
}
void usernameChange(String value) {
print("");
}
void addKeyBoardListener() {
keyboardVisibilityController = KeyboardVisibilityController();
keyboardVisibilityController.onChange.listen(onKeyboardVisibilityChange);
}
Widget buildUsernameTextfieldAdaptedToKeyboard() {
return isKeyboardVisible
? buildKeyBoardVisibleUsernameTextfield()
: buildKeyBoardHiddenUsernameTextfield();
}
Widget buildPasswordTextfieldAdaptedToKeyboard() {
return isKeyboardVisible
? buildKeyboardVisiblePasswordTextfield()
: buildKeyboardHiddenPasswordTextfield();
}
Widget buildKeyBoardVisibleUsernameTextfield() {
return Expanded(
flex: 18,
child: Container(
child: Row(
children: <Widget>[
Spacer(
flex: 1,
),
Flexible(
flex: 8,
child: TextField(
focusNode: emailFocus,
controller: _usernameController,
autocorrect: false,
keyboardType: TextInputType.emailAddress,
maxLengthEnforcement: MaxLengthEnforcement.none,
onChanged: usernameChange,
style: TextStyle(
height: 1,
fontSize: displayWidth * globals.textFieldFontSize0),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.all(
MediaQuery.of(context).size.height * 0.02),
labelText: 'Epost',
),
textCapitalization: TextCapitalization.none),
),
Spacer(
flex: 1,
)
],
),
),
);
}
Widget buildKeyBoardHiddenUsernameTextfield() {
return Expanded(
flex: 8,
child: Container(
child: Row(
children: <Widget>[
Spacer(
flex: 1,
),
Flexible(
flex: 8,
child: TextField(
focusNode: emailFocus,
controller: _usernameController,
autocorrect: false,
keyboardType: TextInputType.emailAddress,
maxLengthEnforcement: MaxLengthEnforcement.none,
onChanged: usernameChange,
style: TextStyle(
height: 1,
fontSize: displayWidth * globals.textFieldFontSize0),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.all(
MediaQuery.of(context).size.height * 0.02),
labelText: 'Epost',
),
textCapitalization: TextCapitalization.none),
),
Spacer(
flex: 1,
)
],
),
),
);
}
Widget buildKeyboardVisiblePasswordTextfield() {
return Flexible(
flex: 18,
child: Row(
children: <Widget>[
Spacer(
flex: 1,
),
Flexible(
flex: 8,
child: TextField(
focusNode: passwordFocus,
maxLengthEnforcement: MaxLengthEnforcement.none,
controller: _passwordController,
autocorrect: false,
style: TextStyle(
height: 1,
fontSize: displayWidth * globals.textFieldFontSize0),
decoration: InputDecoration(
contentPadding:
EdgeInsets.all(MediaQuery.of(context).size.height * 0.02),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
filled: true,
fillColor: Colors.white,
labelText: 'Lösenord',
),
obscureText: true,
textCapitalization: TextCapitalization.none),
),
Spacer(
flex: 1,
)
],
),
);
}
Widget buildKeyboardHiddenPasswordTextfield() {
return Flexible(
flex: 8,
child: Row(
children: <Widget>[
Spacer(
flex: 1,
),
Flexible(
flex: 8,
child: TextField(
focusNode: passwordFocus,
maxLengthEnforcement: MaxLengthEnforcement.none,
controller: _passwordController,
autocorrect: false,
style: TextStyle(
height: 1,
fontSize: displayWidth * globals.textFieldFontSize0),
decoration: InputDecoration(
contentPadding:
EdgeInsets.all(MediaQuery.of(context).size.height * 0.02),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
filled: true,
fillColor: Colors.white,
labelText: 'Lösenord',
),
obscureText: true,
textCapitalization: TextCapitalization.none),
),
Spacer(
flex: 1,
)
],
),
);
}
Widget buildKeyboardAdaptedResponseForms() {
return Expanded(
flex: isKeyboardVisible ? 6 : 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
flex: 8,
child: Container(
child: Text("$loginResponse",
overflow: TextOverflow.visible,
style: new TextStyle(
fontSize: displayWidth * globals.linkFontSize0,
color: Colors.red),
textAlign: TextAlign.left)),
),
Spacer(
flex: 1,
)
],
),
);
}
Widget buildKeyboardAdaptedRememberMeForms() {
return isKeyboardVisible
? Container()
: Expanded(
flex: 3,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
flex: 8,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
child: Text(
"Kom ihåg mig",
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: displayWidth * globals.linkFontSize0),
),
),
Container(
child: Checkbox(
value: rememberMe,
onChanged: rememberMeChange,
),
)
],
),
),
Spacer(
flex: 1,
)
],
),
);
}
Widget buildKeyboardAdaptedIForgotPasswordLink() {
return isKeyboardVisible
? Container()
: Flexible(
flex: 5,
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
flex: 8,
child: Container(
alignment: Alignment.centerLeft,
child: InkWell(
child: Text(
"Jag har glömt mitt lösenord",
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: displayWidth * 0.04),
),
onTap: resetPasswordPressed,
),
),
),
Spacer(
flex: 1,
)
],
),
);
}
buildKeyboardAdaptedButtonBar() {
return Flexible(
flex: isKeyboardVisible ? 14 : 6,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Spacer(
flex: 4,
),
Expanded(
flex: 15,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateColor.resolveWith(
(states) => Color.fromRGBO(217, 217, 217, 1))),
child: Text(
'Logga in',
textAlign: TextAlign.center,
style: new TextStyle(
fontSize: displayWidth * globals.buttonFontSize0,
color: new Color.fromRGBO(54, 104, 129, 1.0)),
),
onPressed: loggaInPressed,
)),
Spacer(
flex: 1,
),
Expanded(
flex: 15,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateColor.resolveWith(
(states) => Color.fromRGBO(217, 217, 217, 1))),
child: Text(
'Avbryt',
style: new TextStyle(
fontSize: displayWidth * globals.buttonFontSize0,
color: new Color.fromRGBO(54, 104, 129, 1.0)),
),
onPressed: () {
resetFocus();
_usernameController.clear();
_passwordController.clear();
},
),
),
Spacer(
flex: 4,
),
],
));
}
void setDisplayDimensions() {
if (displayWidth == 1) displayWidth = MediaQuery.of(context).size.width;
}
void onKeyboardVisibilityChange(bool visible) {
setState(() {
isKeyboardVisible = visible;
});
}
hideSystemOverlay() {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
void onScaffoldTap() {
resetFocus();
}
void resetFocus() {
try {
if (emailFocus.hasFocus) emailFocus.unfocus();
if (passwordFocus.hasFocus) passwordFocus.unfocus();
if (passwordFocus.hasFocus || emailFocus.hasFocus)
Focus.of(context).unfocus();
} catch (e) {}
}
onSwipeDown() {
resetFocus();
}
buildPolicyLink() {
return InkWell(
child: Text(
"Sekretesspolicy",
style: TextStyle(
fontSize: displayWidth * globals.linkFontSize0,
color: Colors.blue,
decoration: TextDecoration.underline),
),
onTap: privacyPolicyTapped,
);
}
buildVersionNr() {
return Text(
"Version 1.2.9",
style: TextStyle(
fontSize: displayWidth * globals.linkFontSize0, color: Colors.black),
);
}
buildControlsLayer() {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Spacer(flex: isKeyboardVisible ? 2 : 7),
buildLogo(isKeyboardVisible ? 40 : 20),
Spacer(flex: isKeyboardVisible ? 1 : 3),
Flexible(
flex: 10,
child: Text(
"Välkommen till My App",
overflow: TextOverflow.visible,
style: new TextStyle(
fontSize: displayWidth * globals.titleFontSIze0),
textAlign: TextAlign.center,
),
),
Spacer(
flex: 7,
),
buildUsernameTextfieldAdaptedToKeyboard(),
Spacer(flex: isKeyboardVisible ? 4 : 2),
buildPasswordTextfieldAdaptedToKeyboard(),
isKeyboardVisible ? Spacer(flex: 2) : Container(),
buildKeyboardAdaptedResponseForms(),
buildKeyboardAdaptedRememberMeForms(),
buildKeyboardAdaptedIForgotPasswordLink(),
Spacer(flex: isKeyboardVisible ? 4 : 2),
buildKeyboardAdaptedButtonBar(),
Spacer(
flex: isKeyboardVisible ? 2 : 10,
)
],
),
);
}
buildPolicyLayer() {
return isKeyboardVisible
? Container()
: Positioned(
bottom: 10,
left: 10,
child: buildPolicyLink(),
);
}
buildVersionLayer() {
return isKeyboardVisible
? Container()
: Positioned(bottom: 10, right: 10, child: buildVersionNr());
}
}
pubspec.yaml:
name: myapp
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
http: ^0.13.4
flutter:
sdk: flutter
firebase_messaging: ^11.0.0
intl: ^0.17.0
shared_preferences: ^2.0.8
path_provider_platform_interface: ^2.0.1
platform: ^3.0.2
flutter_secure_storage: ^4.2.1
swipedetector: ^1.2.0
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.3
url_launcher: ^6.0.3
firebase_core: ^1.0.4
flutter_keyboard_visibility: ^5.1.0
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/myapp_logo.png
- assets/myapp_logo.png
- assets/logo_small.png
- assets/green_smiley.png
- assets/orange_smiley.png
- assets/red_smiley.png
- assets/horizontal_line.png
Final thoughts and question
Why isn't the log in page rendered properly in the release build, but works in debug mode?
Thanks!
flutter logs
to check what happens at runtime. This works even if your app runs in release mode.