Develop Reference

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

OnPressed is not working in Flutter with firebase

There is no error in this code but doesn't work.Can someone please provide an example code of what's needed to solve for this? ➡︎
onPressed: () {widget.snapshot['twitter'];}
import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class PostDetails extends StatefulWidget {
DocumentSnapshot snapshot;
PostDetails({required this.snapshot});
#override
_PostDetailsState createState() => _PostDetailsState();
}
class _PostDetailsState extends State<PostDetails> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: const Icon(Icons.arrow_back_ios, color: Colors.redAccent),
),
title: Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: CachedNetworkImageProvider(
widget.snapshot['imgUrl'],
),
fit: BoxFit.cover,
),
),
),
SizedBox(width: 15),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.snapshot['name'],
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 3),
Text(
widget.snapshot['job'],
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
color: Colors.black45,
),
),
],
),
],
),
actions: [
IconButton(
icon: FaIcon(FontAwesomeIcons.twitter),
onPressed: () {
widget.snapshot['twitter'];
},
)
],
// centerTitle: false,
),
When I click the button[onPressed],I want to display the code ---widget.snapshot['twitter'];.
What am I doing wrong here? I'd really appreciate some help. Thank you.

Visibility of Welcome Back Container and Bottom Navigation Bar on screen all time while scrolling

I am writing a code in flutter for my application and my page looks like this:
Screen View from Starting
Screen View from Ending
What I want is that my Widget where I have written welcome back etc and an avatar shown with it should remain all-time visible even when I am scrolling. Also, i want my Bottom Navigation bar to remain visible as well.
My code for Welcome Screen:
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xffe8e5af),
elevation: 0,
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return BluetoothConnectBand();
},
),
);
},
),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 22, horizontal: 47),
width: size.width,
height: 157.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0),
),
color: const Color(0xffe8e5af),
),
child: Column(
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Welcome Back\nNabia',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w800,
fontSize: 21,
color: const Color(0xff000000),
height: 1.380952380952381,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
SizedBox(
height: 23.0,
),
Text(
'Check your daily history',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 13,
color: const Color(0xff6c6c6c),
height: 1.5384615384615385,
fontWeight: FontWeight.w600),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
],
),
),
Container(
alignment: Alignment.centerRight,
width: size.width,
padding: EdgeInsets.symmetric(horizontal: 33),
child: CircleAvatar(
radius: 48,
backgroundColor: Colors.white,
child: CircleAvatar(
backgroundImage: AssetImage('assets/images/avatar.jpg'),
radius: 42,
),
),
),
],
),
and for Bottom Navigation Bar is:
Container(
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20)),
boxShadow: [
BoxShadow(color: Colors.grey, spreadRadius: 0, blurRadius: 5),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
child: BottomNavigationBar(
//elevation: 7,
type: BottomNavigationBarType.fixed,
//fixedColor: const Color(0xff898a8f),
backgroundColor: Colors.white,
unselectedFontSize: 10,
selectedFontSize: 10,
selectedLabelStyle: optionStyle,
currentIndex: _currentIndex,
selectedItemColor: const Color(0xffd4d411),
unselectedItemColor: const Color(0xffd4d411),
onTap: onTabTapped, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text(
'Home',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: Colors.black,
),
),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text(
'Caregiver',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: Colors.black,
),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_pin_circle),
title: Text(
'History',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: Colors.black,
),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text(
'Profile',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 10,
color: Colors.black,
),
),
),
],
),
),
),
Please help me out with what I should write to make my screen work perfectly because I am a beginner to Flutter and I am still learning.

You could try to use an Expanded widget to let the scrollable area take up the remaining space. You would have to move the welcome-widget outside of the SingleChildScrollView.
Here's a simplified example that might help you.
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
_Welcome(),
Expanded(
child: SingleChildScrollView(
child: _Charts(),
),
),
],
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
label: "1",
),
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
label: "2",
),
],
),
);
When the BottomNavigationBar is passed into the Scaffold's bottomNavigationBar parameter, it should always be visible and remain on the bottom of the screen.

Dialog with top gravity and overlay line in flutter

Trying to make this UI, unable to set gravity or position on dialog. I don't have any idea to make overlay doted line.
class DashboardScreen extends StatefulWidget {
#override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Container(),
appBar: AppBar(centerTitle: false,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
elevation: 0,
title: Text(
"Inventory",
textScaleFactor: 1.3,
style: TextStyle(color: Colors.black87, fontFamily: "light"),
),
actions: [
IconButton(
onPressed: (){},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
),
IconButton(
onPressed: (){},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
),
IconButton(
onPressed: (){
// openAlertBox();
showDialog(context: context,
builder: (_) =>Dialog(
backgroundColor: Colors.transparent,
insetPadding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white
),
padding: EdgeInsets.fromLTRB(20, 50, 20, 20),
child: Text("You can make cool stuff!",
style: TextStyle(fontSize: 24),
textAlign: TextAlign.center
),
),
],
)
));
},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
)
],
),
);
}
}
How it is looking.

qrScanner inside Expanded layer, How to add two button in Flutter

In flutter, I want to make an application that scans qr code and display the qr text.
I have two buttons, which are done, scan again.
And how to put that 2 button, bottom of that scan area. If i try to put that button inside expanded layer, it looks all red
Here is the code & screenshot.
How can i solve this ?
import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:qr_code_scanner/qr_scanner_overlay_shape.dart';
void main() => runApp(MaterialApp(home: QRSCAN()));
const flash_on = "FLASH ON";
const flash_off = "FLASH OFF";
const front_camera = "FRONT CAMERA";
const back_camera = "BACK CAMERA";
class QRSCAN extends StatefulWidget {
const QRSCAN({
Key key,
}) : super(key: key);
#override
State<StatefulWidget> createState() => _QRSCANState();
}
class _QRSCANState extends State<QRSCAN> {
bool Done_Button = false;
var qrText = "";
QRViewController controller;
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.blueAccent),
onPressed: () {
Navigator.pop(context);
controller?.pauseCamera();
},
),
elevation: 0.0,
backgroundColor: Colors.white,
actions: <Widget>[
IconButton(
icon: Icon(Icons.help_outline, color: Colors.grey,),
onPressed: () {},
),
],
),
body: Column(
children: <Widget>[
Expanded(
child: QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.blueAccent,
borderRadius: 10,
borderLength: 130,
borderWidth: 5,
overlayColor: Color(0xff010040),
),
),
flex: 4,
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text("$qrText", style: TextStyle(color: Colors.black,),),
InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Done',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () async {
setState(() {
qrText = "";
controller?.resumeCamera();
Done_Button = false;
});
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Again',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
],
),
),
flex: 1,
),
],
),
);
}
_isFlashOn(String current) {
return flash_on == current;
}
_isBackCamera(String current) {
return back_camera == current;
}
void _onQRViewCreated(QRViewController controller) {
this.controller = controller;
controller.scannedDataStream.listen((scanData) {
setState(() {
qrText = scanData;
controller?.pauseCamera();
Done_Button = true;
});
});
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}

you can refactor your code as follows
` Column(children: <Widget>[
/* QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.blueAccent,
borderRadius: 10,
borderLength: 130,
borderWidth: 5,
overlayColor: Color(0xff010040),
),
),*/
SizedBox(height:5),
Center(
child: Container(height: 100, color: Colors.white, width: 100),
),
Text(
"$qrText",
style: TextStyle(
color: Colors.black,
),
),
InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Done',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () async {
setState(() {
qrText = "";
// controller?.resumeCamera();
// Done_Button = false;
});
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Again',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
]),
);`