Related
I am trying to achieve a UI in which there are 2 buttons in the center and then afterwards there are 2 rows at the bottom of the screen fixed respective to screen sizes I will stay at its place, but I'm unable to do it in my case I'm using Column and all the other containers and rows are in it.
Desired Result on emulator is fine
What I am getting in real device
Here is the code.
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fill,
),
Padding(
padding: const EdgeInsets.only(
top: 550,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 650,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 750,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 760,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)
],
),
),
);
}
}
Use this method its will do the job. Background image will appear and you can align your widgets using the Alignment property
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/intropage.png',
),
)),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 250.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 500.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)),
);
}
}
Try to wrap your widgets inside
Positioned(
Align(
alignment: Alignment.bottomCenter,
child: _your_widget_here()
It's not recommanded to use fix value for the layout.
Stack here it's not necessary.
A simple Spacer Widget can the work. But there are multiple way to do it.
import 'package:flutter/material.dart';
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fitWidth,
),
const Spacer(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
],
),
),
);
}
}
If you can use standard buttons, use them. I used ElevatedButton with custom styles, so please check it.
In general it is a bad idea to add accumulated top padding to each element. Screens sizes are different and your layout will be failed on another screen size.
Please see my example of how to do this better.
Also I added other small improvements, maybe you will be interested in.
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
Widget _createButton({
required VoidCallback onPressed,
required Widget child,
required Color textColor,
}) {
return ElevatedButton(
onPressed: onPressed,
child: child,
style: ElevatedButton.styleFrom(
elevation: 0.0,
primary: Colors.white,
onPrimary: textColor,
textStyle: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
padding: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
),
fixedSize: Size(180.0, 60.0),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 400.0, //your image height
child: Image.network(
"https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270",
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_createButton(
child: Text("Sign Up"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
//your page
builder: (context) => Container(),
),
);
},
textColor: Colors.black,
),
SizedBox(height: 32.0),
_createButton(
child: Text("Sign In"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
//your page
builder: (context) => Container(),
),
);
},
textColor: Color(0xFFFE6B01),
),
SizedBox(height: 32.0),
],
),
),
],
),
),
_BottomSection(),
],
),
),
);
}
}
class _BottomSection extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Expanded(
child: Divider(
height: 2,
thickness: 2,
color: Colors.white,
),
),
SizedBox(width: 10),
Text(
"Please Read",
style: TextStyle(color: Colors.white),
),
SizedBox(width: 10),
Expanded(
child: Divider(
height: 2,
thickness: 2,
color: Colors.white,
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 6.0,
right: 20.0,
left: 20.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Container()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Container()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
],
),
),
],
);
}
}
Folloing is my alert dialog box code, i need to set an background image for the alert dialog instead of blue color, need to show a design
AlertDialog(
backgroundColor: Colors.blue,
titlePadding: EdgeInsets.all(0),
contentPadding: EdgeInsets.all(0),
title: Container(
decoration: BoxDecoration(
color: profile_edit_toolbar_color,
borderRadius: BorderRadius.all(Radius.circular(8))),
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(18),
child: Text(
'Select countries to show',
style: TextStyle(
color: Colors.yellow[300],
fontSize: 20,
fontFamily: fontFamily_3),
// style: CustomStyle.balooCustom(20, Colors.white)
),
),
IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.close,
size: 25,
color: Colors.white,
)),
],
),
Row(
children: [
Expanded(
child: Container(
height: 120,
child: DisplayCountriesForm(
countriesList: eventResponse.countriesList,
num: 0,
displayCountries: displayCountries,
onValueChanged: (updatedList) {
},
),
)),
Expanded(
child: Container(
height: 120,
child: DisplayCountriesForm(
countriesList: eventResponse.countriesList,
num: 1,
displayCountries: displayCountries,
onValueChanged: (updatedList) {
},
),
)),
Expanded(
child: Container(
height: 120,
child: DisplayCountriesForm(
countriesList: eventResponse.countriesList,
num: 2,
displayCountries: displayCountries,
onValueChanged: (updatedList) {
},
),
)),
],
),
],
),
),
);
Try below code I have add background image of the alert dialog hope your problem is solved , Use your widget also and change background image on your need
TextButton(
child: Text('Pressed Me'),
onPressed: () => showDialog(
context: context,
builder: (context) => AlertDialog(
content: Stack(
alignment: Alignment.center,
children: <Widget>[
Image.network(
'https://www.kindpng.com/picc/m/355-3557482_flutter-logo-png-transparent-png.png',
),
Text(
'Add Your Text Here',
style: TextStyle(
fontSize: 24,
),
),
],
),
),
),
),
Your Result Screen->
I have design that shows flash offers count but when i tried to design like the following image the alignment of widgets do not work properly. How do i approach this design? I have tried many codes but i am not getting the desired results.
The design i am trying to create
The design i did so far
Code
Widget FlashOffers(){
return GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width:350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))
),
),
Center(child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Flash Offers",style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
)),
Row(
// crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
],),
],
),
),
);
}
Try this: Remove your row widget and add alignment: Alignment.center to stack that is in the row. Wrap you Stack with Align Widget and add alignment: Alignment.centerRight
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width: 350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
Align(
alignment: Alignment.centerRight,
child: Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
),
],
),
),
);
}
You should consider adding the label and counter icon inside the container widget.
Your code should look something like this:
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50,
width: 350,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3"),
],
)
],
),
),
),
);
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: Center(
child: flashOffers(),
),
),
),
);
}
Widget flashOffers() {
return GestureDetector(
onTap: () {
print('new route push');
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 350,
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFc1202e),
Color(0xFFea2127),
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(
Radius.circular(30),
),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(-10, 10),
color: Colors.black26,
),
]),
child: Row(
children: [
Expanded(
child: Text(
"Flash Offers".toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.folder,
size: 30,
color: Colors.yellowAccent,
),
Text(
'3',
style: TextStyle(color: Colors.red),
),
],
),
SizedBox(width: 10),
],
),
),
),
);
}
}
Here is the example without using Stack. Hope you will get the idea and it will help :-)
return MaterialButton(elevation: 8,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0)
),
child: Row(children: [
Expanded(child: Text('FLASH OFFER', textAlign: TextAlign.center)),
CircleAvatar(
backgroundColor: Colors.yellow, radius: 12, child: Text("2"))
]),
onPressed: () {
print('button pressed');
});
Edit: To show the shadow, use the elevation property of button. You can also change the shadow color
You can use positioned,it is so useful in stack widget.
Look at this:
https://medium.com/codespace69/flutter-widget-positioning-eca4fea1528b#:~:text=A%20Stack%20allows%20you%20to,the%20children%20of%20a%20stack.
Try this
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
),
child: FlatButton(
splashColor: iconButton,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadiusDirectional.circular(20)),
color: primaryColor,
onPressed: () {
sendMail();
},
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Text(
"Send",
style: styleText(
size: 20,
weight: FontWeight.bold,
color: white),
),
Container(
child: Center(
child: SvgPicture.asset(
ic_profileWhite,
height: 20,
width: 20,
),
),
),
],
),
),
),
),
Where is the problem in my code ?
My app works fine in debug mode. But when I go to release mode, Some widgets don't show which placed in stack.
I took internet permission also. <uses-permission android:name="android.permission.INTERNET"/>
Here is my Debug version output that I want.
And here is my release version output
Here is my code -
import 'package:boimarket/model/model.dart';
import 'package:boimarket/screen/pdfscreen.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class BookDescription extends StatefulWidget {
BookDescription({Key key, #required this.storyBooksValue}) : super(key: key);
final storyBooksValue;
#override
_BookDescriptionState createState() => _BookDescriptionState();
}
class _BookDescriptionState extends State<BookDescription> {
#override
void initState() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp,
]);
super.initState();
}
#override
void dispose() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp,
]);
}
#override
Widget build(BuildContext context) {
var _boxHeight = MediaQuery.of(context).size.height;
var _boxWidth = MediaQuery.of(context).size.width;
final Color _whiteCream = Color.fromRGBO(250, 245, 228, .8);
final Color _darkBlue = Color.fromRGBO(0, 68, 69, 1);
final Color _lightBlue = Color.fromRGBO(44, 120, 108, 1);
return Scaffold(
appBar: null,
body: Stack(
children: <Widget>[
Container(
color: _lightBlue,
child: Stack(
children: <Widget>[
Card(
elevation: 10,
child: Container(
height: _boxHeight,
width: _boxWidth,
child: FadeInImage.assetNetwork(
fadeOutCurve: Curves.easeInCubic,
placeholder: 'assets/images/cover.jpg',
image: widget.storyBooksValue.imgUrl == null
? "https://firebasestorage.googleapis.com/v0/b/boi-market.appspot.com/o/images%2Fcover.jpg?alt=media&token=f8070b25-533c-454b-9d2e-80702d72371e"
: widget.storyBooksValue.imgUrl,
height: _boxHeight,
width: _boxWidth,
fit: BoxFit.cover,
),
),
),
Container(
height: _boxHeight,
width: _boxWidth,
color: Colors.black54,
),
Align(
alignment: Alignment.bottomCenter,
child: SingleChildScrollView(
child: Column(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, top: 60.0),
child: Expanded(
child: Text(
"এই লেখকের আরও কিছু বই",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white),
overflow: TextOverflow.clip,
),
),
),
Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
height: 250.0,
child: FutureBuilder(
future: fetchBooks(),
builder: (context,
AsyncSnapshot<List<Book>> snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(
backgroundColor: _whiteCream,
),
Text("Loading"),
],
);
} else {
var writterBooks = snapshot.data
.where((b) =>
b.author ==
widget.storyBooksValue.author)
.toList();
print(writterBooks.length);
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: writterBooks.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Route route = MaterialPageRoute(
builder: (context) =>
BookDescription(
storyBooksValue:
writterBooks[
index]),
);
Navigator.push(context, route);
},
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
Container(
width: 100,
height: 140.0,
child: ClipRRect(
borderRadius:
BorderRadius
.circular(5.0),
child: FadeInImage
.assetNetwork(
fadeOutCurve:
Curves.linear,
placeholder:
'assets/images/cover.jpg',
image: writterBooks[
index]
.imgUrl ==
null
? "https://firebasestorage.googleapis.com/v0/b/boi-market.appspot.com/o/images%2Fcover.jpg?alt=media&token=f8070b25-533c-454b-9d2e-80702d72371e"
: writterBooks[
index]
.imgUrl,
width: 90,
height: 120.0,
fit: BoxFit.cover,
),
),
),
Flexible(
child: Container(
width: 90,
child: Text(
"${writterBooks[index].name}",
style: TextStyle(
color:
Colors.white,
fontWeight:
FontWeight
.bold,
fontSize: 12.0),
overflow:
TextOverflow.clip,
),
),
),
],
),
),
);
});
}
},
),
),
],
),
),
Container(
width: _boxWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0),
topRight: Radius.circular(40.0)),
color: _whiteCream,
boxShadow: [
BoxShadow(
color: Colors.black45,
blurRadius: 5.0,
spreadRadius: 1.0)
],
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
SizedBox(
height: 30.0,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
RichText(
overflow: TextOverflow.clip,
text: TextSpan(
style: TextStyle(
color: Colors.black),
children: [
TextSpan(
text: "বইয়ের নামঃ",
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16.0)),
TextSpan(
text:
" ${widget.storyBooksValue.name}")
]),
),
SizedBox(
height: 5.0,
),
RichText(
overflow: TextOverflow.clip,
text: TextSpan(
style: TextStyle(
color: Colors.black),
children: [
TextSpan(
text: "লেখকঃ",
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16.0)),
TextSpan(
text:
" ${widget.storyBooksValue.author}")
]),
),
SizedBox(
height: 5.0,
),
RichText(
overflow: TextOverflow.clip,
text: TextSpan(
style: TextStyle(
color: Colors.black),
children: [
TextSpan(
text: "বইয়ের ধরণঃ",
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16.0)),
TextSpan(
text:
" ${widget.storyBooksValue.genreClass}")
]),
),
],
),
),
),
Card(
elevation: 5.0,
child: FadeInImage.assetNetwork(
fadeOutCurve: Curves.easeInCubic,
placeholder: 'assets/images/cover.jpg',
image: widget.storyBooksValue.imgUrl ==
null
? "https://firebasestorage.googleapis.com/v0/b/boi-market.appspot.com/o/images%2Fcover.jpg?alt=media&token=f8070b25-533c-454b-9d2e-80702d72371e"
: widget.storyBooksValue.imgUrl,
height: 100.0,
fit: BoxFit.cover,
),
),
],
),
Divider(),
widget.storyBooksValue.description == null
? Center(
child: Text(
'দুঃখিত, ${widget.storyBooksValue.name} বইটির বর্ণনা পাওয়া যায়নি'))
: SelectableText(
'${widget.storyBooksValue.description} \n',
),
Text(
'আমরা বইটির একটি ebook খুজে পেয়েছি । \n\n আপনি বইটি পড়তে চাইলে, " Read Now " বাটনে ক্লিক করুন । \n'),
SizedBox(
height: 75.0,
)
],
),
),
),
],
),
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 10.0, top: 20.0),
child: IconButton(
icon: Icon(Icons.arrow_back),
color: _whiteCream,
onPressed: () {
Navigator.pop(context, false);
}),
),
Positioned(
bottom: 60.0,
right: 20.0,
child: RaisedButton(
onPressed: () {
print("clicked");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PdfScreen(singleBookData: widget.storyBooksValue)),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
color: _darkBlue,
child: Text(
"Read now",
style: TextStyle(color: _whiteCream),
),
),
),
],
),
);
}
}
How can I fix this problem? please someone help me.
I solve my problem by remove container of text. Just use text() without container()
Expanded(
child: Text("এই লেখকের আরও কিছু বই",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white),
overflow: TextOverflow.clip,
),
)
For creating a release version of APP you can use android studio,
I am currently working on a flutter project when I create a release version of the app then the app only shows a white blank screen and nothing else, I tried everything to solve this but nothing seems to work, after searching for 2 days I come to know that using android studio we can also create a release version of the app, release version of the app using android studio solved my problem.
My personal choice is the android studio for flutter projects.
Here is the link to the question which I used to create the release version.
How to build signed apk from Android Studio for Flutter
Im trying to use onTap in Inkwell to open/preview an existing Card but unsure how to do this, for now I just have it printing 'hello'
body: Container(
color: Colors.indigo,
child: Column(
children: <Widget>[
Flexible(
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (
_, DataSnapshot snapshot,
Animation<double> animation, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: InkWell(
child: ListTile(
title: Text(
boardMessages[index].subject,
style: TextStyle(fontWeight: FontWeight.bold
),),
),
onTap: (){
print('hello');
},
),
),
);
},
),
),
],
),
EDIT: I know how to do it using Full Screen Page thanks to the docs provided, how would I do this with a Dialog? Much appreciated
Over your onTap drawer item do this:
onTap: () {
Navigator.pop(context);
_showDialog(text: 'Index $index');
}
And use the following code to show a Dialog with the necessary text:
void _showDialog({#required String text}) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
elevation: 0,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
child: IntrinsicWidth(
child: IntrinsicHeight(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
"Custom Alert Dialog",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
),
),
SizedBox(
height: 20,
),
Text(
text,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16,
),
),
SizedBox(
height: 20,
),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("OK"),
),
),
],
),
),
),
),
);
},
);
If fully customizable with any needs you'd had.