why is nothing show from the database? - flutter

hey guys i have problem when i go the this section must be show a name for the owner of the account , but if i go to this page its nothing show in the page can someone explain why this happend to me? and in the initstate giving me error and this error is:
Local variable 'GetData' can't be referenced before it is declared.
and this is my code flutter:
import 'dart:convert';
import 'package:ktabna/pages/auth.dart';
import 'package:ktabna/pages/settings/singin.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:provider/provider.dart';
class setting extends StatefulWidget {
const setting({Key? key}) : super(key: key);
#override
State<setting> createState() => _settingState();
}
int select_item = 0;
class _settingState extends State<setting> {
List list = [];
#override
Widget build(BuildContext context) {
return Consumer<User>(builder: (context, user, _) {
String userr = user.email;
Future ReadData() async {
var url = "http://10.0.2.2:8000/api/getname";
var res = await http
.post(Uri.parse(url), body: {'email': user.email.toString()});
if (res.statusCode == 200) {
var red = jsonDecode(res.body);
setState(() {
list = red;
});
}
}
void initState() {
super.initState();
GetData();
}
GetData() async {
await ReadData();
}
return Scaffold(
body: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: ((cts, i) {
return Container(
height: 850,
child: ListView(
children: [
///loge
Container(
margin: EdgeInsets.only(left: 90, right: 70),
height: 54.0,
width: 224.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffF4AC47), width: 5),
color: Color(0xff42A9D2),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40))),
child: new Center(
child: new Text(
"الاعدادات",
style: TextStyle(
fontSize: 30, color: Color(0xff072A52)),
textAlign: TextAlign.center,
),
)),
),
SizedBox(
height: 40,
),
///end logo
/// user name
Container(
margin: EdgeInsets.only(left: 150, right: 150),
child: Row(
children: [
Text(
"${list[i]["name"]} ",
style: TextStyle(
fontSize: 25, fontFamily: "Cairo"),
),
Icon(
Icons.sentiment_satisfied_alt_sharp,
size: 30,
color: Colors.teal,
),
],
),
),
/// user name end
/// القوائم
Container(
child: Row(
children: [
///1
Container(
margin: EdgeInsets.only(top: 35),
height: 69.0,
width: 390.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff42A9D2), width: 5),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
topRight: Radius.circular(15),
topLeft: Radius.circular(15))),
child: Container(
margin: EdgeInsets.only(left: 140),
child: TextButton(
onPressed: () {
Navigator.of(context)
.pushNamed("My abs");
},
child: Row(
children: [
Text(
"أعلاناتي",
style: TextStyle(
fontSize: 28,
fontFamily: "Caira",
color: Color(0xffF4AC47)),
),
SizedBox(
width: 70,
),
Icon(
Icons.event_available,
size: 35,
)
],
),
),
),
),
)
///1
],
),
),
///2
Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(top: 35),
height: 69.0,
width: 390.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff42A9D2), width: 5),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
topRight: Radius.circular(15),
topLeft: Radius.circular(15))),
child: Container(
margin: EdgeInsets.only(left: 70),
child: TextButton(
onPressed: () {
Navigator.of(context)
.pushNamed('account');
},
child: Row(
children: [
Text(
"معلومات الحساب",
style: TextStyle(
fontSize: 28,
fontFamily: "Caira",
color: Color(0xffF4AC47)),
),
SizedBox(
width: 50,
),
Icon(
Icons.badge,
size: 35,
)
],
),
),
),
),
)
],
),
),
///2
///3
Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(top: 35),
height: 69.0,
width: 390.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff42A9D2), width: 5),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
topRight: Radius.circular(15),
topLeft: Radius.circular(15))),
child: Container(
margin: EdgeInsets.only(left: 120),
child: TextButton(
onPressed: () {
Navigator.of(context).pushNamed('comm');
},
child: Row(
children: [
Text(
"لدفع العمولة",
style: TextStyle(
fontSize: 28,
fontFamily: "Caira",
color: Color(0xffF4AC47)),
),
SizedBox(
width: 50,
),
Icon(
Icons.currency_exchange,
size: 35,
)
],
),
),
),
),
)
],
),
),
///3
///4
Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(top: 35),
height: 69.0,
width: 390.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff42A9D2), width: 5),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
topRight: Radius.circular(15),
topLeft: Radius.circular(15))),
child: Container(
margin: EdgeInsets.only(left: 75),
child: TextButton(
onPressed: () {
Navigator.of(context)
.pushNamed("about");
},
child: Row(
children: [
Text(
"نبذة عن التطبيق",
style: TextStyle(
fontSize: 28,
fontFamily: "Caira",
color: Color(0xffF4AC47)),
),
SizedBox(
width: 50,
),
Icon(
Icons.photo_album,
size: 35,
)
],
),
),
),
),
)
],
),
),
///4
/// 5
Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(top: 35),
height: 69.0,
width: 390.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff42A9D2), width: 5),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
topRight: Radius.circular(15),
topLeft: Radius.circular(15))),
child: Container(
margin: EdgeInsets.only(left: 100),
child: TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: ((context) {
return SingIn();
})));
},
child: Row(
children: [
Text("تسجيل خروج",
style: TextStyle(
fontSize: 28,
fontFamily: "Caira",
color: Colors.red)),
SizedBox(
width: 50,
),
Icon(
Icons.login,
size: 35,
)
],
),
),
),
),
),
],
),
),
///5
],
));
})));
});
}
}
and this is my auth code:
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
class User extends ChangeNotifier {
String email = "";
void singin(String emailTxt, String passwordTxt) {
email = emailTxt;
notifyListeners();
}
}
and im using laravel 9

Related

how to insert a text in a container and padding for an image

I want to insert a text to my container I tried this code segment. but it is not displaying. first image showing how it display now. image two showing how I need it to be implement. also the image icon need to have padding from the corner. how can I do this.
child: Text(
"Activity",
style: TextStyle(color: textWhite, fontSize: 2)),
///////////////// //////////////////////////////////////////////////////////
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(20),
height: 45,
width: 180,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.4),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
image: DecorationImage(
alignment: Alignment.centerLeft,
image: AssetImage(
'assets/images/running.png',
),
),
),
child: Text(
"Activity",
style: TextStyle(color: textWhite, fontSize: 20),
),
),
Container(
height: 45,
width: 180,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.4),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10),
),
image: DecorationImage(
alignment: Alignment.centerLeft,
image: AssetImage('assets/images/medal.png'),
),
),
)
],
),
)
Use Following Code But You need to edit the style according to you
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
width: 200,
// You can set width of container here
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
bottomLeft: Radius.circular(15),
),
),
child: Padding(
// Following padding to give space around the icon and text
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/running.png',
),
SizedBox(
width: 15,
),
Text(
"Activity",
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
Container(
height: 50,
width: 200,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/medal.png',
),
SizedBox(
width: 15,
),
Text(
"Achievement",
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
],
),
You will get following response
This image is similar to your goal. run on DartPad.
You can change Image.network to Image.asset
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
// backgroundColor: Colors.blue[700],
body: Container(
height: 45,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.4),
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
iconRowText('https://picsum.photos/45', 'Activity'),
Container(
height: 45,
width: 0.4,
color: Colors.black,
),
iconRowText('https://picsum.photos/45', 'Achievements'),
],
),
),
);
}
Row iconRowText(String image, String text) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(image, height: 45, width: 45, fit: BoxFit.cover),
),
Text(text),
],
);
}
}

How can I fix the pixel error when the keyboard is opened?

Hello everyone, I am sharing the code of a login screen below. When I click on the textfields on this login screen, I encounter a pixel error when the keyboard opens. Images are also available below. I would be glad if you help.
import 'package:flutter/material.dart';
class loginpage extends StatefulWidget {
loginpage({Key? key}) : super(key: key);
#override
State<loginpage> createState() => _loginpageState();
}
class _loginpageState extends State<loginpage> {
TextEditingController? textController1;
TextEditingController? textController2;
bool? passwordVisibility;
final formKey = GlobalKey<FormState>();
final scaffoldKey = GlobalKey<ScaffoldState>();
#override
void initState() {
super.initState();
textController1 = TextEditingController();
textController2 = TextEditingController();
passwordVisibility = false;
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
backgroundColor: Color(0xFF262D34),
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 1,
decoration: BoxDecoration(
color: Color(0xFF262D34),
),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: AlignmentDirectional(0, 0),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 100, 0, 0),
child: Image.asset(
'assets/logo/logo.png',
width: 200,
height: 200,
fit: BoxFit.cover,
),
),
),
SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
height: 370,
decoration: const BoxDecoration(
color: Color.fromARGB(255, 255, 255, 255),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0),
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(20, 12, 20, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(20, 0, 0, 0),
child: Text(
'Welcome back',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 18,
),
),
),
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFFDBE2E7),
),
),
child: Icon(
Icons.phone,
color: Colors.black,
size: 18,
),
),
],
),
),
Form(
key: formKey,
autovalidateMode: AutovalidateMode.disabled,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
20, 12, 20, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: TextFormField(
controller: textController1,
obscureText: false,
decoration: const InputDecoration(
labelText: 'Email Address',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius:
const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
),
),
],
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
20, 12, 20, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: TextFormField(
controller: textController2,
obscureText: passwordVisibility!,
decoration: InputDecoration(
labelText: 'Password',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius:
const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius:
const BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
suffixIcon: InkWell(
onTap: () => setState(
() => passwordVisibility =
passwordVisibility!,
),
child: Icon(
passwordVisibility!
? Icons.visibility_outlined
: Icons
.visibility_off_outlined,
color: Color(0xFF757575),
size: 18,
),
),
),
),
),
],
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
20, 12, 20, 16),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'Forgat Password?',
style: TextStyle(
fontFamily: 'Poppins',
),
),
SizedBox(
width: 130,
height: 40,
child: ElevatedButton(
onPressed: () {
print('Button pressed ...');
},
child: Text("LOGIN"),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(12),
side: BorderSide(
color: Colors.transparent,
width: 1),
)),
),
),
),
],
),
),
],
),
),
],
)
],
),
),
),
],
),
),
);
}
}
As you can see above, when I click on the textfields, I encounter the problem as above.
warp your Column with single child scroll view
this link will help you more
https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660

How do I automatically scale images in flutter to fit every resolution without overflow and scrolling?

I'm new and my English is pretty bad. Please answer easy to understand...
I already tried using the AspectRatio Widget but it, combined with a Center widget, moved my buttons in the center. Apart from that it worked but the buttons really need to stick to the side. This is my code so far:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';
import 'contentData.dart';
import 'package:swipedetector/swipedetector.dart';
AppBrain contentData = AppBrain();
class SwipePage extends StatefulWidget {
SwipePage({Key key, this.title}) : super(key: key);
final String title;
#override
_SwipePage createState() => _SwipePage();
}
class _SwipePage extends State<SwipePage> {
#override
Widget build(BuildContext context) {
return SwipeDetector(
swipeConfiguration: SwipeConfiguration(
horizontalSwipeMaxHeightThreshold: 80.0,
horizontalSwipeMinDisplacement: 30.0,
horizontalSwipeMinVelocity: 150.0),
onSwipeLeft: () {
Navigator.of(context).push(
toInformationPage(),
);
},
child: Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
AppBrain().getImageAdress(),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0, bottom: 20),
child: Divider(
color: Colors.grey,
height: 20,
thickness: 2,
indent: 120,
endIndent: 120,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
bottomRight: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {},
textColor: red,
child: Icon(
Icons.close,
size: 45,
),
),
),
Container(
width: 120,
),
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {
Navigator.of(context).push(
toInformationPage(),
);
},
textColor: green,
child: Icon(
Icons.check,
size: 45,
),
),
),
],
),
)
],
),
),
),
),
);
}
}
This is what it looks like now:
https://imgur.com/a/2kgpJ6A
This is what it should look like across all aspect-ratios and resolutions (the image should just scale down..):
https://imgur.com/FBNlpDa
Looking at your code you have at least two different problems.
Setting the correct image fit - You can use BoxFit.contain in Image.asset(fit: boxFit.contain, .... ) to make sure it is resized to be contained inside it's parent.
You have a Column and want the first child to take all the available width. Hence you should nest it inside Expanded widget.
ie. structurally something like:
Column(
children: [
Expanded(
// your image goes here which will take as much height as possible.
child: Image.asset('asset', fit: BoxFit.contain),
),
Container(
// your button bar which takes up the rest of the height
child: MaterialButton( ... ),
),
],
);
I left out quite a bit, but i hope you get the gist.
I think I fixed it myself with the help of Herbert, thanks :). I wrapped the Container containing my image in an Expanded widget and set a flex value of 3.
This is my new code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';
import 'contentData.dart';
import 'package:swipedetector/swipedetector.dart';
AppBrain contentData = AppBrain();
class SwipePage extends StatefulWidget {
SwipePage({Key key, this.title}) : super(key: key);
final String title;
#override
_SwipePage createState() => _SwipePage();
}
class _SwipePage extends State<SwipePage> {
#override
Widget build(BuildContext context) {
return SwipeDetector(
swipeConfiguration: SwipeConfiguration(
horizontalSwipeMaxHeightThreshold: 80.0,
horizontalSwipeMinDisplacement: 30.0,
horizontalSwipeMinVelocity: 150.0),
onSwipeLeft: () {
Navigator.of(context).push(
toInformationPage(),
);
},
child: Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
AppBrain().getImageAdress(),
fit: BoxFit.contain,
),
),
margin: EdgeInsets.fromLTRB(25, 25, 25, 0),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: Divider(
color: Colors.grey,
height: 20,
thickness: 2,
indent: 120,
endIndent: 120,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
bottomRight: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {},
textColor: red,
child: Icon(
Icons.close,
size: 45,
),
),
),
Container(
width: 120,
),
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {
Navigator.of(context).push(
toInformationPage(),
);
},
textColor: green,
child: Icon(
Icons.check,
size: 45,
),
),
),
],
),
)
],
),
),
),
);
}
}
You can try using FittedBox widget too.

Flutter: How to make this type bubble in chat message?

How to make this type bubble in chat message?
Current Output
Require Output
Tried below code but didn't get the top side left part of curve. Is there any packages or lib. available to make this type of custom shapes in flutter.
Code to produce current output.
Thanks in Advance.
Padding(
padding: const EdgeInsets.symmetric(vertical: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white, width: 3),
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: const AssetImage(
'assets/images/composite-corporate-group-photos.jpg'),
),
),
),
Positioned(
top: 37,
child: Padding(
padding:const EdgeInsets.only(left: 3),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 8),
decoration: const BoxDecoration(
color: pinkColor,
shape: BoxShape.rectangle,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
),
],
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(22.0),
bottomLeft: Radius.circular(22.0),
topRight: Radius.circular(22.0),
),
),
child: Text(
widget.text,
style: const TextStyle(
fontFamily: 'PoppinsRegular',
fontSize: 16,
color: Colors.white,
),
),
),
),
),
],
)
],
),
);
I had tried CustomPainter first. But can't get success due to some math issue.
Finally got success with BoxDecoration. Don't know my solution is good or bad. But
Please let me know if anyone have another best approach.
class MyWidget extends StatefulWidget {
double width = 0, height = 60;
MyWidget({this.width, this.height});
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
#override
void initState() {
super.initState();
if (widget.width == 0) {
widget.width = MediaQuery.of(context).size.width;
}
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: widget.height,
width: widget.width,
color: colorPink,
child: Material(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(widget.height / 2),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: widget.height,
height: widget.height,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
image: ExactAssetImage('images/pokemon/u83.jpg'),
fit: BoxFit.cover,
),
border: new Border.all(
color: Colors.white,
width: 4.0,
),
),
),
],
),
),
),
Container(
height: widget.height,
width: widget.width,
child: Material(
color: colorPink,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(widget.height / 3),
bottomRight: Radius.circular(widget.height / 3),
topRight: Radius.circular(widget.height / 3),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Some text here....",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15.0,
),
),
),
),
),
)
],
);
}
}
check image Output
Good design to build on flutter.
here is the post, you can checkout!
Custom paint in flutter

How to design Custom dialog box using close icon with flutter?

I have an image of the dialog box and trying to design the same as below the image.
I tried but it's not same as above the image
I just want set cross button at the top right corner, like above the image.
i used Stack, and a placed Positioned widget at the top:0.0,right:0.0.
CODE:
customDialogBox(BuildContext context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(
height: 20.0,
width: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
),
],
),
),
Positioned(
top: 0.0,
right: 0.0,
child: FloatingActionButton(
child: Image.asset("assets/red_cross.png"),
onPressed: (){
Navigator.pop(context);
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80)),
backgroundColor: Colors.white,
mini: true,
elevation: 5.0,
),
),
],
)
);
});
}
here's my Dialog Box:
Try this will work perfect.
import 'package:flutter/material.dart';
import 'custom_dialog.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: RaisedButton(
onPressed: () {
showDialog(context: context, builder: (BuildContext context) => CustomDialog());
},
child: Text('show custom dialog'),
),
),
);
}
}
Dialog Widget :
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(context),
);
}
Widget dialogContent(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 0.0,right: 0.0),
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 18.0,
),
margin: EdgeInsets.only(top: 13.0,right: 8.0),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16.0),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black26,
blurRadius: 0.0,
offset: Offset(0.0, 0.0),
),
]),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(height: 24.0),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0,bottom:15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(16.0),
bottomRight: Radius.circular(16.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
)
],
),
),
Positioned(
right: 0.0,
child: GestureDetector(
onTap: (){
Navigator.of(context).pop();
},
child: Align(
alignment: Alignment.topRight,
child: CircleAvatar(
radius: 14.0,
backgroundColor: Colors.white,
child: Icon(Icons.close, color: Colors.red),
),
),
),
),
],
),
);
}
}
Approach 2:
void showFancyCustomDialog(BuildContext context) {
Dialog fancyDialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
height: 300.0,
width: 300.0,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12.0),
),
),
Container(
width: double.infinity,
height: 50,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Align(
alignment: Alignment.center,
child: Text(
"Dialog Title!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
),
),
child: Align(
alignment: Alignment.center,
child: Text(
"Okay let's go!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
),
),
),
Align(
// These values are based on trial & error method
alignment: Alignment(1.05, -1.05),
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.close,
color: Colors.black,
),
),
),
),
],
),
),
);
showDialog(
context: context, builder: (BuildContext context) => fancyDialog);
}
In order to build the custom Dialog box I had to do everything custom.
I still used stack but instead of a inbuilt DialogBox i used a Container, I also replaced the image of the icon with an actual icon, and made the ok bold, as on the expected result.
hope this fits your needs.
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(30.0),
),
width: 500.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
)//
),
SizedBox(
height: 20.0,
width: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"OK",
style: TextStyle(color: Colors.blue,fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
onTap:(){
Navigator.pop(context);
},
),
],
),
),
Align(
alignment: Alignment(1.05, -0.35),
child: InkWell(
onTap: () {},
child: Container(
width: 40.0,
height: 40.0,
child: Icon(Icons.close, color: Colors.red, size: 40,),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black,offset: Offset(0, 1), blurRadius: 2),
],
shape: BoxShape.circle,
color: Colors.white
),
),
),
),
],
),