How can I place a divider between those list tiles - android

I'm new to coding and I've just started my first project, I'm just reading flutter's documentation and trying to do stuff on my own, but this one's been kinda tough, how can i place a divider between those list tiles?
I've tried some stuff like ListView.separated and similar alternatives, couldn't make it work on my code, probably cause the structure of it is all wrong somehow, any tips?
Widget build(BuildContext context) {
return Container(
child: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.blueGrey,
child: Text(
"LPI",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w700,
),
),
),
accountName: Text(
'Lucas Pereira Issler',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
),
),
accountEmail: Text(
'lucas.issler#ftc.edu.br',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
),
ListTile(
leading: Icon(
Icons.pets,
size: 40,
color: Colors.blueAccent,
),
title: Text('Adoção',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w800,
color: Colors.blueAccent,
)),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(
Icons.remove_red_eye,
size: 40,
color: Colors.blueAccent,
),
title: Text('Desaparecidos',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w800,
color: Colors.blueAccent,
)),
onTap: () {
Navigator.pop(context);
},
),


You need to make a separate ListView.separated() for the ListTile. Checkout this DartPad, hope it helps.

Related

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),
],
),
),
);
}
}

How can I create a complex Splashscreen with Flutter?

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,
),
),
],
),
),
),
],
);
}
}

launch a button(url) and then open browser in flutter

I want when the Sign Up is clicked, the browser be open and go to my website but i dont know how to do that.
here is my code, when i tap on Sign Up it doesn't work:
return Container(
child: GestureDetector(
onTap: () => launch("https://my.drclubs.ir/"),
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: "Don\`t have an Account?",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500),
),
TextSpan(
text: "Sign Up",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
),
),
);
}

You can use a package called url_launcher here.
Example:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
const _url = 'https://flutter.dev'; /// Put your custom url here.
void main() => runApp(
const MaterialApp(
home: Material(
child: Center(
child: RaisedButton(
onPressed: _launchURL,
child: Text('Show Flutter homepage'),
),
),
),
),
);
void _launchURL() async =>
await canLaunch(_url) ? await launch(_url) : throw 'Could not launch $_url';
You can try this:
return Container(
child: GestureDetector(
onTap: _launchURL,
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: "Don\`t have an Account?",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500),
),
TextSpan(
text: "Sign Up",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
),
),
);

how to center text on an elevated button

I'm trying to center the text on an elevatedbutton but I'm not succeeding. Here's the code:
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blueAccent, // background
textStyle: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
height: 2.8,
),
),
child: Text(
"Add",
),
onPressed: _addToDo,
),

Wrap the Text with a Center widget.
so instead of this:
child: Text(
"Add",
),
do this:
Center(
child: Text(
"Add",
)),

Remove height: 2.8 from style and wrap ElevatedButton with SizedBox and give desire height.
SizedBox(
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blueAccent, // background
textStyle: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
child: Text("Add"),
onPressed: _addToDo,
),
);

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