How can I create a complex Splashscreen with Flutter? - android

I'm searching for a way to create a more complex splashscreen than just a icon and a backgroundcolor (for android). I how you can achieve that for iOS by editing the LaunchScreen.storyboard file, but how would you do that for android?
I'm looking for something like that:
As you see there isn't only a background and one image, there is also text at the bottom.
Thanks in advance.


UI Design for your splash screen. you can change image and icon as your need... if you need to implement splash screen on your app add this code in your main.dart file with future.delayed and mention time period to display
class StackOverFlow extends StatefulWidget {
const StackOverFlow({Key? key}) : super(key: key);
#override
State<StackOverFlow> createState() => StackOverFlowState();
}
class StackOverFlowState extends State<StackOverFlow> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(206,37,37,1),
body: bodyWidget(),
bottomSheet: bottomSheetWidget(),
);
}
Widget bodyWidget() {
return Column(
children: [
SizedBox(height: MediaQuery.of(context).size.height/5),
Center(
child: Container(
constraints: const BoxConstraints(
minHeight: 200.0,
maxHeight: 200.0,
minWidth: 200.0,
maxWidth: 300.0,
),
decoration: const BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: AssetImage('assets/eagle.png'),
fit: BoxFit.fill,
),
),
),
),
],
);
}
Widget bottomSheetWidget() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: 'powered by ',
style: TextStyle(
color: Color.fromRGBO(215, 215, 215, 1.0),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w100,
fontSize: 9.0,
),
),
TextSpan(
text: '❤ ',
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1.0),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
TextSpan(
text: 'MEO ',
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1.0),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500,
fontSize: 17.0,
),
),
TextSpan(
text: 'Wallet',
style: TextStyle(
color: Color.fromRGBO(215, 215, 215, 1.0),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500,
fontSize: 13.0,
),
),
],
),
),
),
],
);
}
}

Related

i build drawer when when i tap on button it show me different error

when i click on the link in drawer it show me different error.
when i click on any drawer link it stuck and give me error message and took me to other error page.
_///////////////////////////////////////////////////////
_///////////////////////////////////////////////////////
_///////////////////////////////////////////////////////
_///////////////////////////////////////////////////////
class MainDrawer extends StatelessWidget {
const MainDrawer({super.key});
Widget buildListTitle(String title, IconData icon, Function function) {
return ListTile(
leading: Icon(
icon,
size: 20,
),
title: Text(
title,
style: TextStyle(
fontFamily: 'RobotoCondensed',
fontSize: 24,
fontWeight: FontWeight.bold),
),
onTap: function(),
);
}
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: [
Container(
height: 120,
width: double.infinity,
padding: EdgeInsets.all(20),
alignment: Alignment.centerLeft,
color: Theme.of(context).accentColor,
child: Text(
'cooking up',
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 30,
color: Theme.of(context).primaryColor,
),
),
),
SizedBox(
height: 20,
),
buildListTitle("Meal", Icons.restaurant, () {
Navigator.of(context).pushNamed("/");
}),
buildListTitle("Meal", Icons.restaurant, () {
Navigator.of(context).pushNamed(FilterScreen.routeName);
}),
],
),
);
}
}

On your buildListTitle change the onTap: function() to onTap: function

Which widget should be used for following design in flutter?

I wants to redesign my current project UI with this one which widgets should be used here to implement this Screen in flutter

There are several ways to implement this screen, however as I imagine you are new to flutter, I will help you with a semi-ready widget. I advise you to look for courses on Flutter before asking for ready-made components on StackOverFlow. This community aims to help programmers evolve their code and your question has no code.
However, I've sketched out a little code that does something similar to what you're looking for, I hope you can use this code to start your project and your flutter journey, but I also want you to watch out for more concrete programming questions.
Here goes: Try to create a file called LoginWidget and add this piece of code, then just call the component on your main page and that's it, you'll have something similar to what you want. Take the opportunity to browse the component and change what you want.
import 'package:flutter/material.dart';
class LoginWidget extends StatefulWidget {
const LoginWidget({super.key});
#override
State<LoginWidget> createState() => _LoginWidgetState();
}
class _LoginWidgetState extends State<LoginWidget> {
late bool _passwordIsVisible = false;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orange,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.all(20),
child: Column(
children: const [
SizedBox(height: 20),
Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.left,
),
SizedBox(height: 20),
Text(
'Welcome back! Please enter your details.',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w200,
),
textAlign: TextAlign.left,
),
],
),
),
const SizedBox(height: 20),
SizedBox(
width: 600,
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
margin: const EdgeInsets.all(0),
child: Column(
children: [
const SizedBox(height: 50),
const SizedBox(
width: 300,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Email',
),
),
),
const SizedBox(height: 5, width: 300, child: Divider(color: Colors.orange,)),
const SizedBox(height: 20),
SizedBox(
width: 300,
child: TextFormField(
obscureText: !_passwordIsVisible,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Password',
suffixIcon: IconButton(
icon: Icon(
_passwordIsVisible ? Icons.lock_open : Icons.lock,
color: Colors.black,
),
onPressed: () {
setState(() {
_passwordIsVisible = !_passwordIsVisible;
});
},
),
),
),
),
const SizedBox(height: 5, width: 300, child: Divider(color: Colors.orange,)),
const SizedBox(height: 20),
const Text(
'Forgot password?',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
),
textAlign: TextAlign.left,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.orange,
onPrimary: Colors.white,
minimumSize: const Size(250, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
child: const Text('Login'),
),
const SizedBox(height: 50),
],
),
),
),
],
),
),
);
}
}

Do Update method needs to be in a form or can just simply inside a button as well?

So its just a general question that I would like to know because I'm still new in flutter development. So I just want to know does update method have to be inside a form or it can just simply put inside a button for example like save for profile pages. Heres my profile page. if anyone knew how to implement update inside this page it would be helpful
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_user_profile/model/parking.dart';
class ParkingPage extends StatefulWidget {
#override
State<ParkingPage> createState() => _ParkingPageState();
}
class _ParkingPageState extends State<ParkingPage> {
User? user = FirebaseAuth.instance.currentUser;
Parking loginuser = Parking();
#override
void initState(){
super.initState();
FirebaseFirestore.instance
.collection('parkingTech')
.doc(user!.uid)
.get()
.then((value){
this.loginuser = Parking.fromMap(value.data());
setState(() {});
});
}
// #override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF121212),
appBar: AppBar(
backgroundColor: Color(0xFF121212),
elevation: 0.0,
title: Text('Parking Tech',
style:TextStyle(
color: Color(0xFFFFFFFF),
fontWeight: FontWeight.bold,
),
),
centerTitle:true,
actions: [
// Icon(Icons.menu,
// color:Colors.amber,
// size:40,
// )
]
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
Row(
mainAxisAlignment: MainAxisAlignment.center ,
children:[
CircleAvatar(
backgroundColor: Colors.amber,
radius: 100.0,
child: Center(
child: Text('P',
style:TextStyle(
fontSize: 80,
color: Color(0xFF121212),
fontWeight: FontWeight.bold,
),
),
)
),
],
),
SizedBox(height: 15),
Text("Parking time : ${loginuser.name} ",
style:TextStyle(
fontSize: 20,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
Text('00 : 56 : 05',
style:TextStyle(
fontSize: 50,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15),
Text('P15 AED',
style:TextStyle(
fontSize: 30,
color: Colors.blueGrey,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15),
Text('On Parking ',
style:TextStyle(
fontSize: 15,
color: Colors.amber,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15),
Text('End Parking',
style:TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 12),
Text('Extend Parking',
style:TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 12),
],
),
),
);
}
}

Provider not displaying updated state in another screen

so im using provider and change notifier, the problem is when i change the state and notifiy listeners in the same file the user interface is updated, but when i try to access the same data from the model in another screen it still keeps the original or first version and not the updated version, the class in the other file is even using change notifier provider and a consumer just as the file with the modal class inside but is not changing the value, its only keeping the initial value, the second file only has changenotifierprovider and consumer, but it only displays the initial not the updated but the first file with the model class, and change notifier function is displaying the updated version in its widgets
this is the part of my first where i created my changenotifier, theres more but it was long so i just added this part, but all widgets here display the updated state
class MyModel with ChangeNotifier{
String datesChosen = "Click here";
String checkin;
String checkout;
String email;
String name;
String roomtype = "Click here";
String phonenumber;
String hotelname;
void updateData1 (data){
datesChosen = data;
print(datesChosen);
notifyListeners();
}
void updateData2 (data){
roomtype = data;
print(roomtype);
notifyListeners();
}
And this is my second screen, which only displays the intial states even after they are updated in the frst screen
import 'package:flutter/material.dart';
import 'package:hotel_search/common/theme.dart';
import 'package:hotel_search/sliding_bottom_sheet_content.dart';
import 'package:hotel_search/home_page.dart';
import 'package:provider/provider.dart';
class BookScreen extends StatefulWidget {
#override
_BookScreenState createState() => _BookScreenState();
}
class _BookScreenState extends State<BookScreen> {
#override
void initState() {
super.initState();
/*Future.delayed(Duration(milliseconds: 1000)).then((v) {
Navigator.pop(context);
});*/
}
#override
Widget build(BuildContext context) {
final themeData = HotelConceptThemeProvider.get();
return ChangeNotifierProvider<MyModel>(
create: (context) => MyModel(),
child: MaterialApp(
home:Scaffold(
backgroundColor: Colors.grey[50],
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
elevation: 0,
titleSpacing: 0,
backgroundColor: Colors.white,
title: Text(' ' ,style: TextStyle(
color: Colors.black,
fontFamily: 'Montserrat',
fontSize: 20,
))
)
,
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 40,),
Container(
width: MediaQuery.of(context).size.width - 100,height: 100,
child:Image.asset(
"assets/images/brand.png",
width: 0,
height:0,
fit: BoxFit.cover,)),
Divider(
height: 25,
color: Colors.grey[300],
),
Container(
padding: EdgeInsets.only(left:20,top:20, bottom: 20),
width: MediaQuery.of(context).size.width,
child:Text('Review \nYour Booking' ,style: TextStyle(
color: Colors.black,
fontFamily: 'Montserrat',
fontSize: 30,
))
),
Divider(
height: 25,
color: Colors.grey[300],
),
Container(
padding: EdgeInsets.only(left:20,top:20),
width: MediaQuery.of(context).size.width,
child:Text("HOTEL NAME" ,style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20,
fontWeight: FontWeight.w700,
))
),
Row(
children: <Widget>[
Consumer<MyModel>(
builder: (context, myModel, children){
return
Container(
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text(myModel.datesChosen.toString() ,style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
))
),
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text(myModel.roomtype.toString(), style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
)),
)
,
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text("CHECK IN AND OUT TIME" ,style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
))),
Container(
padding: EdgeInsets.only(left:20,top:5),
width: 200,
child:Text("TYPE OF ROOM CHOSEN" ,style: TextStyle(
fontSize: 13,
fontFamily: 'Montserrat',
)))
]
)
);}),
Spacer(),
Container(
margin: EdgeInsets.only(right:20),
width: 150 ,
height:120,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("img/card.jpg"), fit: BoxFit.cover),
color: Colors.grey[300],
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10), boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 3), // changes position of shadow
)
])
)
]
),
SizedBox(height: 60),
Divider(
height: 25,
color: Colors.grey[300],
),
SizedBox(height:20),
Container(
color: Color(0xff008d4b),
height: 60,
width: MediaQuery.of(context).size.width -50,
child:FlatButton(
onPressed: () {
/*...*/
},
child: Text(
"Book Now", style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 20,
),
),
),
)
]
),
)
)
)));
}
}

Have a look here at one of my more detailed answers about using the Provider. I think what you're missing is wrapping the application with a Provider Widget and calling setState(() {}); when you make those changes.
P.S. Please use Ctrl + Alt + L inside the editor to indent the code properly before asking a question. What you posted is barely readable. Also, you might wanna consider splitting up your code into multiple files and not just create the whole app in main.dart. You know... just some organizing here and there.

Why does my Flutter app look fine on the IOS emulator but overflow on Android?

I understand that there are different screen sizes, but is there a way to account for that? I also don't think the screen sizes are that different. The emulator for Android is a nexus 6 and the IOS emulator is an iphone 11, which is a difference of .14 inches. The IOS version fits comfortably while the Android overflows by a lot. Attached are screenshots.
How would I fix this, aside from squishing everything closer together? Is there a way to make everything proportional to screen size, so it looks the same on IOS but then scales down to the Android phone? My Dart code is below:
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('images/headshot.jpg'),
),
),
SizedBox(
height: 0.0,
),
Container(
child: Text(
'Lawrence Jing',
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontFamily: 'Dancing_Script'),
),
),
SizedBox(
height: 10.0,
),
Container(
child: Text(
'SERTIFIED CASTING INTERN',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Card(
color: Colors.amberAccent,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.school),
SizedBox(
width: 10.0,
),
VerticalDivider(),
],
),
title: Text(
'University of Michigan',
style: TextStyle(
color: Colors.blue,
fontSize: 19.0,
fontWeight: FontWeight.bold,
),
),
enabled: false,
),
),
SizedBox(
height: 23.0,
width: 200.0,
child: Divider(
color: Colors.teal[200],
),
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'(650)278-7409',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("tel:+1234"),
onLongPress: () => launch("sms: 1234"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lajing#umich.edu',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("mailto:email"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal,
),
title: Text(
'LinkedIn',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://www.linkedin.com/in/lajing/"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.code,
color: Colors.teal,
),
title: Text(
'GitHub',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://github.com/LarryJing"),
),
),
],
),
),
),
);}
As you can see, the size of everything is pretty much hardcoded.

You should be use SingleChildScrollView as parent of Column so if space not available then it will scrollable (or) you can use ListView instead of Column
For Example
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('images/headshot.jpg'),
),
),
SizedBox(
height: 0.0,
),
Container(
child: Text(
'Lawrence Jing',
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontFamily: 'Dancing_Script'),
),
),
SizedBox(
height: 10.0,
),
Container(
child: Text(
'SERTIFIED CASTING INTERN',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Card(
color: Colors.amberAccent,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.school),
SizedBox(
width: 10.0,
),
VerticalDivider(),
],
),
title: Text(
'University of Michigan',
style: TextStyle(
color: Colors.blue,
fontSize: 19.0,
fontWeight: FontWeight.bold,
),
),
enabled: false,
),
),
SizedBox(
height: 23.0,
width: 200.0,
child: Divider(
color: Colors.teal[200],
),
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'(650)278-7409',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("tel:+1234"),
onLongPress: () => launch("sms: 1234"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lajing#umich.edu',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("mailto:email"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal,
),
title: Text(
'LinkedIn',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://www.linkedin.com/in/lajing/"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.code,
color: Colors.teal,
),
title: Text(
'GitHub',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://github.com/LarryJing"),
),
),
],
),
),
),
),
);
}

Since you are using SizedBox with the specific height it will overflow if the screen size is small.You can use MediaQuery.of(context).size.height for using height of SizedBox as percentage or screens total height
The second approach would be to use Spacer and Expanded to space the content according to the available space in the Column.
Hope this helps.

Categories

Resources