Develop Reference

Bottom align clipped image in Flutter

Bottom align clipped image in Flutter
Hello!
I'm beginner in Flutter
The following image:
I clipped the lettuce image in half with ClipPath:
I'm trying to move it into bottom right to be similar to the following image:
I tried many times with my available experience with no luck
Here's the code:
class GroceryPage extends StatelessWidget {
const GroceryPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 10.0),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: const Color(0xFFE9F9F2),
),
width: double.infinity,
child: Stack(
children: [
ClipPath(
clipper: HalfClip(),
child: Align(
alignment: Alignment.bottomRight,
child: Image.asset(
'${kProductsImagesAsset}lettuce.png',
height: 150,
// width: 150,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: kGreenTitleStyle.copyWith(
fontSize: 20.0,
),
),
Text(
'%10 off',
style: kGreenTitleStyle.copyWith(
fontSize: 40.0,
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
}
Can anyone help me doing so?

Use Positioned widget as Stack child.
Positioned(
top: 0,
left: 0,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: kGreenTitleStyle.copyWith(
fontSize: 20.0,
),
),
Text(
'%10 off',
style: kGreenTitleStyle.copyWith(
fontSize: 40.0,
),
),
],
),
),
More about using Stack
class GroceryPage extends StatelessWidget {
const GroceryPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 10.0),
Container(
height: 300, //cardHeight
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: const Color(0xFFE9F9F2),
),
child: Stack(
children: [
Align(
child: Container(
height: 600, // full image height= cardHeight*2
color: Colors.red,
),
// child: Image.asset(
// '${kProductsImagesAsset}lettuce.png',
// height: 150,
// // width: 150,
// fit: BoxFit.cover,
// ),
),
Positioned(
top: 0,
left: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: TextStyle(
fontSize: 20.0,
),
),
Text(
'%10 off',
style: TextStyle(
fontSize: 40.0,
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
}

How to change the color of just ONE button when the button is clicked from a container with 9 buttons Flutter

So I have a container with 9 ElevatedButtons (code shown below) i would like to change the color of the selected button, but there can only be 1 selected button at a time, how would i go about doing this? So if one button is selected the button will go green, but if another button in the container is clicked it will revert back the color of the previously selected color and change the current selected button to green.
here is the container with the elevated buttons:
Container(
padding: EdgeInsets.all(25),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.white),
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("10.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("20.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("50.000"))),
),
),
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("100.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("250.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("500.000"))),
),
),
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("750.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("1.000.000", style: TextStyle(fontSize: 13)))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("2.000.000", style: TextStyle(fontSize: 13)))),
),
),
),
],
),
],
),
),
If i have to guess I would think I would need to put it inside of a map, but I'm not sure how to go about doing this. I would prefer to learn the manual implementation but if needed i'm fine with using packages if needed.

For this work You can use ChoiceChip instead of using Material Button directly
A material design choice chip.
ChoiceChips represent a single choice from a set. Choice chips contain
related descriptive text or categories.
class MyThreeOptions extends StatefulWidget {
const MyThreeOptions({Key? key}) : super(key: key);
#override
State<MyThreeOptions> createState() => _MyThreeOptionsState();
}
class _MyThreeOptionsState extends State<MyThreeOptions> {
int? _value = 1;
#override
Widget build(BuildContext context) {
return Wrap(
children: List<Widget>.generate(
3,
(int index) {
return ChoiceChip(
label: Text('Item $index'),
selected: _value == index,
onSelected: (bool selected) {
setState(() {
_value = selected ? index : null;
});
},
);
},
).toList(),
);
}
}

create a new StatefulWidget and just return a button inside that. call the functions and api's in that file only. and call this class name as the child instead ofyour old button. Works for me.

bottom button in ModalBottomSheet is not visible after singlechildscrollview in flutter

I want that Cancellation charges and the bottom button remains fixed on screen, while the Choose Seat(s) and passengers should be scrollable. But, whenever I am trying to insert any widget after singlechildscrollview, it is not appearing at the bottom.
As, my column has 3 widgets, a row, singlechildscrollview and button, so my button and top row should remain there and remaining seats and passengers should be scrollable, but I am not able to see the bottom button, while my row working fine, remaining there.
Code -
showCancellationCharges(BuildContext? context) {
final DateTime currentDate = DateTime.now();
if (ticketData!.data!.booking!.boarding!.eta! >
currentDate.millisecondsSinceEpoch)
showModalBottomSheet(
backgroundColor: Colors.white,
context: context!,
builder: (context) => Wrap(
children: [
StatefulBuilder(
builder: (context, stateSetter) => Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
//height: MediaQuery.of(context).size.height*0.7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0, bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Cancellation Charges',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
)
),
IconButton(
icon: Icon(
Icons.close,
color: colorPrimary,
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
),
Container(
height: MediaQuery.of(context).size.height*0.5,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Seat(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.seats!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.seats![index].selected,
checkBox: (v) => stateSetter(() {
print('seat at index $index $v');
if (v)
totalSeatToCancel++;
else
totalSeatToCancel--;
ticketData!.data!.booking!.seats![index]
.selected = v;
}),
// checkBoxState: data[index.],
imagePath:
'assets/icons/ticket_seat_icon.svg',
title: ticketData!
.data!.booking!.seats![index].code,
)),
),
// CancellationSeatItems(
// data: ticketData.data.booking.seats,
// ),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Passenger(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.passengers!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.passengers![index].selected,
checkBox: (v) => stateSetter(() {
if (v)
totalPassengerToCancel++;
else
totalPassengerToCancel--;
print('passenger at index $index $v');
ticketData!.data!.booking!
.passengers![index].selected = v;
}),
imagePath: (ticketData!.data!.booking!
.passengers![index].gender ==
'MALE')
? 'assets/icons/male_icon.svg'
: 'assets/icons/female_icon.svg',
title: ticketData!.data!.booking!
.passengers![index].name,
)),
),
],
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Container(
child: ValueListenableBuilder(
valueListenable: isCalculating,
builder: (BuildContext context, bool val, Widget? child) {
return FlatButton(
height: 44,
minWidth: MediaQuery.of(context).size.width,
color: val ? Colors.grey : colorPrimary,
onPressed: () => calculateItem(),
child: Text(
val ? 'Calculating...' : 'Calculate',
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
);
},
),
),
),
// CancellationPassengerItems(
// data: ticketData.data.booking.passengers,
// ),
],
),
),
),
),
),
],
));
else
_snackbarService.showSnackbar(
message: 'Sorry, ticket can not be cancelled');
}

Actually I solved the problem. I just used isScrollControlled: true, parameter for showModalBottomSheet and it's done.

you may put the listview inside a container with a height

How to slide pages under appbar flutter

I've been trying so hard to build page view system for quotes app. I want the page to flow full screen from top to bottom and bottom to top scrollable/swipe able to navigate between different quotes each time
like this. The scroll will bring new page each time its not casual scroll. I haven't found any guide regarding this on internet so far.
I don't know about how to build it, nothing is popping in my mind for days now. I've tried pageview with gesture detector for swiping up and down, it doesn't works as desired and appbar is static too and the bottom containers as well I don't want this. What I want is the page/screen to flow under the appbar or even a button on top right corner and under 2 buttons on the bottom.

Create a column of Containers where each Container's height and width equals the height and width of the screen. You can do that by using:
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
Also, make sure to wrap your code with a SingleChildScrollView widget to scroll vertically.
Here's the code:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: Text('Quote number one')),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: Icon(Icons.share), onPressed: () {}),
IconButton(
icon: Icon(Icons.favorite), onPressed: () {})
],
),
)
],
),
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Text('Quote number two'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: Icon(Icons.share), onPressed: () {}),
IconButton(icon: Icon(Icons.favorite), onPressed: () {})
],
)
],
),
)
],
),
),
),
);
}
}

You can use PageView to get this type of view
Drive Video link
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
PageView pageView;
List<String> quotes = [
'#Quote 1\n\n“I\'m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can\'t handle me at my worst, then you sure as hell don\'t deserve me at my best.” ',
'#Qoute 2\n\nSo many books, so little time.',
'#Quote 3\n\n A room without books is like a body without a soul'
];
#override
void initState() {
super.initState();
pageController = PageController();
final _quotes = List.generate(quotes.length, (index) => quoteWidget(index));
pageView = PageView(
children: _quotes,
controller: pageController,
scrollDirection: Axis.vertical,
);
}
Widget quoteWidget(int index) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: Text(
quotes[index],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w300,
color: Colors.white,
),
),
),
),
),
Expanded(
flex: 1,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.share),
),
const SizedBox(width: 20),
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.favorite_border),
),
],
),
),
Expanded(child: Container())
],
),
);
}
#override
void dispose() {
pageController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
brightness: Brightness.dark,
title: Text(widget.title),
),
body: SafeArea(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
pageView,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
children: [
RaisedButton.icon(
icon: Icon(Icons.menu_book),
label: Text('General'),
onPressed: () {},
),
const Spacer(),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Icon(Icons.color_lens),
),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Icon(Icons.person),
),
],
),
)
],
),
),
);
}
}

Create Sign-in-with-Google button in Flutter in accordance with the terms

I'd like to add a "Sign in with Google" Button to my Flutter app. This button should be in accordance with the terms of Google.
My problem is, that the button I've create looks really awful.
I used the images which Google provides on their website but I don't know if I'm doing right with the code for the button.
Widget _createLoginButtonGoogle() {
return new Expanded(
child: new Container(
margin: EdgeInsets.fromLTRB(30.0, 5.0, 30.0, 5.0),
child: new RaisedButton(
color: const Color(0xFF4285F4),
shape: _createButtonBorder(),
onPressed: () {},
child: new Row(
children: <Widget>[
new Image.asset(
'res/images/icons/google/btn_google_dark_normal_mdpi.9.png',
height: 48.0,
),
new Expanded(
child: _createButtonText('Sign in with Google', Colors.white),
),
],
),
),
),
);
}
What I want is that my button looks like the original Google button
And not like my version
Can anyone tell me how to create the original google button? Is there a better way than creating a RaisedButton?

There Is A Pretty Awesome Package Called flutter_signin_button on pub.dev.
You Can Use It It Has Sign In Buttons For
Email
Google
Facebook
GitHub
LinkedIn
Pinterest
Tumblr
Twitter
Apple
With Some Supporting Dark Mode Also With Mini Buttons!
First Add It To Your pubspec.yaml
dependencies:
...
flutter_signin_button:
then import it into your file:
import 'package:flutter_signin_button/flutter_signin_button.dart';
and use the buttons like this:
SignInButton(
Buttons.Google,
onPressed: () {},
)
Here Is A Preview Of All The Buttons:

I'm giving you a general idea, replace Android icon with your Google image using Image.asset(google_image)
InkWell(
onTap: () {},
child: Ink(
color: Color(0xFF397AF3),
child: Padding(
padding: EdgeInsets.all(6),
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Icon(Icons.android), // <-- Use 'Image.asset(...)' here
SizedBox(width: 12),
Text('Sign in with Google'),
],
),
),
),
)

you can use Padding property of raised button also use property of Row widget and mainAxisSize of button. Following code may help you to understand clearly.
new Container(
margin: EdgeInsets.fromLTRB(30.0, 5.0, 30.0, 5.0),
child: new RaisedButton(
padding: EdgeInsets.only(top: 3.0,bottom: 3.0,left: 3.0),
color: const Color(0xFF4285F4),
onPressed: () {},
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Image.asset(
'res/images/icons/google/btn_google_dark_normal_mdpi.9.png',
height: 48.0,
),
new Container(
padding: EdgeInsets.only(left: 10.0,right: 10.0),
child: new Text("Sign in with Google",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),)
),
],
)
),
),

ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white,
onPrimary: Colors.black,
),
onPressed: () {
googleLogin();
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 8, 0, 8),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Image(
image: AssetImage("assets/google_logo.png"),
height: 18.0,
width: 24,
),
Padding(
padding: EdgeInsets.only(left: 24, right: 8),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.black54,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
),
for more you can change the Text font to Roboto Medium and make the size 14x, based on the branding rule https://developers.google.com/identity/branding-guidelines#font

use this one
child: InkWell(
onTap: () {},
child: Container(
height: 50,
width: CustomWidth(context) - 100,
color: Colors.blueAccent,
child: Row(
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 3),
height: 45,
width: 50,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: NetworkImage("https://cdn-icons-png.flaticon.com/512/2991/2991148.png"))),
),
SizedBox(
width: 10,
),
DefaultTextView(
text: "SignUp With Google",
color: AppColors.whiteColor,
fontweight: FontWeight.bold,
)
],
),
),
),

You can use this class and just need to pass function and add google icon in your assets/images folder and change the icon name in code, and you are good to go.
import 'package:flutter/material.dart';
import 'package:social_app/constants/colors.dart';
class GoogleSignInButton extends StatefulWidget {
final function;
final String buttonText;
const GoogleSignInButton(
{super.key, required this.function, required this.buttonText});
#override
State<StatefulWidget> createState() => GoogleSignInButtonState();
}
class GoogleSignInButtonState extends State<GoogleSignInButton> {
bool isButtonClicked = false;
#override
Widget build(BuildContext context) {
return Container(
height: 50,
width: double.infinity,
child: ElevatedButton(
onPressed: isButtonClicked
? () {}
: () async {
setState(() {
isButtonClicked = true;
});
await widget.function();
setState(() {
isButtonClicked = false;
});
},
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.zero),
shape: isButtonClicked
? MaterialStateProperty.all<CircleBorder>(CircleBorder())
: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
)),
backgroundColor: MaterialStateProperty.all<Color>(mainColor),
),
child: isButtonClicked
? Container(
height: 25,
width: 25,
child: CircularProgressIndicator(
color: Colors.white,
),
)
: Container(
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(3)),
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Image.asset("assets/images/google_icon.png"),
),
SizedBox(
width: 30,
),
Text(
"Sign in with google",
style: TextStyle(fontSize: 20),
)
],
),
),
),
);
}
}

For google logo image on white background and raised button with blue background:
Container(
margin: EdgeInsets.fromLTRB(30.0, 5.0, 30.0, 5.0),
child: new RaisedButton(
padding: EdgeInsets.all(1.0),
color: const Color(0xff4285F4),
onPressed: () async {
_signInWithGoogle();
},
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
),
child: Image.asset(
Images.googleLogo,
height: 18.0,
),
),
Container(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: new Text(
"Sign in with Google",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
)),
],
)),
),