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,
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
}
I'm trying to create elevated buttons that have equations on them. Here's the stripped down code that I have thus far:
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const Padding(padding: EdgeInsets.all(10)),
Flexible(
fit: FlexFit.tight,
flex: 10,
child: ElevatedButton(
style: getOptionButtonStyle(0),
onPressed: () =>
{debugPrint("${context.size}"), updateSelection(1)},
child: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
child: TeXViewDocument(
r"""$$0$$""",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.center,
fontStyle: TeXViewFontStyle(
fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
),
),
),
),
),
const Padding(padding: EdgeInsets.all(10)),
Flexible(
fit: FlexFit.tight,
flex: 10,
child: ElevatedButton(
style: getOptionButtonStyle(1),
onPressed: () =>
{debugPrint("${context.size}"), updateSelection(3)},
child: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
child: TeXViewDocument(r"""$$1$$""",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.center,
fontStyle: TeXViewFontStyle(
fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
),
),
),
),
),
const Padding(padding: EdgeInsets.all(10)),
],
),
Unfortunately, this only displays the second button properly, the first has some squiggles that are almost invisible on the right:
I've tried changing the rendering engine to mathjax, added and removed padding and margins in the style, but no luck.
Any idea what is going on, and how to fix it?
Thanks!
Update: it turns out that this behaviour is when I run it on chrome (web). Running on my phone renders perfectly! So: what settings could be affecting this?
Prefrable and less complex
=> By Using GetX Package
1st method
Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: Get.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: Get.width*0.45,
height: 50,
child: ElevatedButton(onPressed: () {}, child: Text("1"))),
Container(
height: 50,
width: Get.width*0.45,
child: ElevatedButton(onPressed: () {}, child: Text("2"))),
],
),
),
));
=> By using Media Query
second method
class Test1 extends StatelessWidget {
var size,height,width;
Test1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
size = MediaQuery.of(context).size;
height = size.height;
width = size.width;
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width*0.45,
height: 50,
child: ElevatedButton(onPressed: () {}, child: Text("1"))),
Container(
height: 50,
width: width*0.45,
child: ElevatedButton(onPressed: () {}, child: Text("2"))),
],
),
),
),
));
}
}
I can't understand what I'm doing wrong.
I have created a small detail page for an application that I am developing on vegan recipes.
I have a space that I can't take away and I don't understand what generated it. Space is what you see circled in red.
Can you help me ?
Thank you,
Vincenzo
class _CookDetailState extends State<CookDetail> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(this.widget.ricetta.title),
backgroundColor: AppColors.darkModeBackgroundColor),
body: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: Hero(
tag: this.widget.ricetta.title,
child: Container(
decoration:
BoxDecoration(image: DecorationImage(image: NetworkImage("https://cdn.pixabay.com/photo/2017/09/16/19/21/salad-2756467__340.jpg"),
fit: BoxFit.cover)),
),
),
),
// white container
Positioned(
left: 24.0,
right: 24.0,
bottom: 16.0,
child: Container(
//height: MediaQuery.of(context).size.height * 0.75,
//height: 650,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 100, sigmaY: 200),
child: Container(
padding: EdgeInsets.all(16.0),
height: 500,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16.0),
height: 800,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
this.widget.ricetta.title,
style: TextStyle(color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold),
),
Spacer(),
Icon(
Icons.favorite_border,
size: 24.0,
color: Colors.white,
),
],
),
new Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
this._generateList(this.widget.ricetta.listIngredieti),
this._generateStep(this.widget.ricetta.listPassaggio),
],
),
),
],
),
),
),
),
),
),
),
),
],
),
);
}
Widget _generateList(List<Ingrediente> listIngrediente){
return Column(
children: <Widget>[
for ( var myElement in listIngrediente ) Text(
myElement.title + " " + myElement.quantita,
style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600))
],
);
}
Widget _generateStep(List<StepRicetta> listStep){
return Column(
children: <Widget>[
for (var myStep in listStep) CheckboxListTile(title: AutoSizeText(myStep.title),
value: false, onChanged: (bool selected){
print("Valore selected");
},
secondary: const Icon(Icons.hourglass_empty),
)
],
);
}
}
My concept would be to leave the writing "Recipe 1", blocked, scrolling only and exclusively the list concerning the list of ingredients, such as "Put the bread", "Put 300 g of water"
I think your second EdgeInsets.all(16.0) create the space, do you have try this : EdgeInset.only(left: 16.0, right: 16.0) ?
my app no longer works, this works yesterday but no matter what I try to debug this even when I didnt change anything and just hot reloads, the Unimplemented error appears.
It works well yesterday. The error on my projects are posted below. it says with a Column widget but I dont know where since it works well yesterday.
IT should start with the LoginScreen and not directly to homescreen, for some reason when I tried my github clone of the app that Im making,it go straight to homescreen and not login screen first.
Also, I didnt do any changes to my homescreen but on the login.dart, register.dart only since yesterday, the firebase authentication works and the app proceeds to the homescreen
Ive added the images of the errors
you can try to clone my project https://github.com/rolandopeda/syncshop
ERROR
I/flutter ( 7581): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 7581): The following assertion was thrown during layout:
I/flutter ( 7581): A RenderFlex overflowed by 2.0 pixels on the bottom.
I/flutter ( 7581):
I/flutter ( 7581): The relevant error-causing widget was:
I/flutter ( 7581): Column
lib\login\login.dart:129
I/flutter ( 7581):
I/flutter ( 7581): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 7581): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 7581): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 7581): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 7581): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 7581): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 7581): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 7581): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 7581): like a ListView.
I/flutter ( 7581): The specific RenderFlex in question is: RenderFlex#7e604 relayoutBoundary=up9 OVERFLOWING:
I/flutter ( 7581): creator: Column ← ConstrainedBox ← Container ← _PointerListener ← Listener ← _GestureSemantics ←
I/flutter ( 7581): RawGestureDetector ← GestureDetector ← MouseRegion ← Semantics ← _FocusMarker ← Focus ← ⋯
I/flutter ( 7581): parentData: <none> (can use size)
I/flutter ( 7581): constraints: BoxConstraints(0.0<=w<=331.4, h=12.0)
I/flutter ( 7581): size: Size(96.0, 12.0)
I/flutter ( 7581): direction: vertical
I/flutter ( 7581): mainAxisAlignment: start
I/flutter ( 7581): mainAxisSize: max
I/flutter ( 7581): crossAxisAlignment: center
I/flutter ( 7581): verticalDirection: down
I/flutter ( 7581): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 7581): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 7581): Another exception was thrown: A RenderFlex overflowed by 164 pixels on the bottom.
════════ Exception caught by widgets library ═══════════════════════════════════
The following _CompileTimeError was thrown building MyApp(dirty):
Unimplemented handling of missing static target
The relevant error-causing widget was
MyApp
main.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/login/register.dart';
import 'package:vmembershipofficial/screens/home_screen.dart';
import 'login/login.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget _getScreenId() {
return StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged, //check if we are login
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
return HomeScreen();
} else {
return LoginPage();
}
},
);
}
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: _getScreenId(),
debugShowCheckedModeBanner: false,
routes: {
HomeScreen.id: (context) => HomeScreen(),
RegisterPage.id: (context) => RegisterPage(),
},
);
}
}
login
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/login/register.dart';
class LoginPage extends StatefulWidget {
LoginPage({Key key}) : super(key: key);
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color(0xff0D192A),
body: Container(
child: ListView(children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Container(
width: 120,
height: 120,
margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
child: Image(
image: AssetImage("assets/images/vlogo.png"),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Container(
margin: EdgeInsets.all(5.0),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
),
),
//TEXTFIELDS //
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.5,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter Your Email",
hintStyle: TextStyle(color: Colors.grey[400]),
)),
),
),
),
SizedBox(height: 20.0),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter Your Password",
hintStyle: TextStyle(color: Colors.grey[400]),
)),
),
),
),
SizedBox(height: 50),
InkWell(
onTap: () {
setState(() {});
},
child: Container(
height: 50,
decoration: BoxDecoration(
color: Color.fromRGBO(211, 184, 117, 100)),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
),
),
SizedBox(height: 40),
Container(
height: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Don't have an account?",
style: TextStyle(color: Colors.white, fontSize: 12.0),
),
SizedBox(width: 12.0),
InkWell(
onTap: () {
setState(
() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegisterPage()),
);
},
);
},
child: Text(
"Register Here",
style: TextStyle(
color: Color.fromRGBO(211, 184, 117, 100),
fontSize: 12.0),
),
)
],
),
),
SizedBox(height: 10),
InkWell(
onTap: () {
setState(() {});
},
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Text(
"Forgot password?",
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
],
)),
),
],
),
),
]),
),
),
);
}
}
homescreen
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:vmembershipofficial/Widgets/afterintroducing.dart';
import 'package:vmembershipofficial/Widgets/discount_carousel.dart';
import 'package:vmembershipofficial/Widgets/header_carousel.dart';
import 'package:vmembershipofficial/Widgets/introducing_vmembership.dart';
class HomeScreen extends StatefulWidget {
static final String id = 'home_screen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _currentTab = 0;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text("Explore V!", style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
),
SizedBox(height:5.0),
HeaderCarousel(),
SizedBox(height: 30.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text("Discount", style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 5.0),
child: Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", style: TextStyle(fontSize: 12.0),),
),
DiscountCarousel(),
SizedBox(height: 30.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text(
"Introducing V Membership Plus", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
child: Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", style: TextStyle(fontSize: 12.0),),
),
VmembershipPlus(),
SizedBox(height: 30.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text(
"Lorem Ipsum", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
child: Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", style: TextStyle(fontSize: 12.0),),
),
SizedBox(height: 10.0,),
AfterIntroducing(),
SizedBox(height: 10.0,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: FlatButton(
padding: EdgeInsets.all(15.0),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
},
child: Text(
"LOREM IPSUM",
style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w600),
),
),
),
SizedBox(height: 50.0,),
],
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentTab, //makes a new variable called current Tab
onTap: (int value) {
setState(
() {
_currentTab = value;
},
);
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search, size: 30.0),
title: Text('Search', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Favorites', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text('Messages', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
// icon: CircleAvatar(
// backgroundImage: NetworkImage(
// 'https://randomuser.me/api/portraits/men/31.jpg'),
// radius: 15.0,
// ),
icon: Icon(Icons.account_circle),
title: Text('Account', style: TextStyle(fontSize: 12.0),),
),
],
),
),
);
}
}
register
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/services/auth_service.dart';
class RegisterPage extends StatefulWidget {
static final String id = 'register';
#override
_RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
final _formKey = GlobalKey<FormState>();
String _name, _email, _password;
_submit() {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
AuthService.signUpUser(context, _name, _email, _password); //
}
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color(0xff0D192A),
body: Container(
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: Container(
width: 120,
height: 120,
margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
child: Image(
image: AssetImage("assets/images/vlogo.png"),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Container(
margin: EdgeInsets.all(5.0),
child: Center(
child: Text("Register an Account",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20)),
),
),
),
Form(
key: _formKey,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Email Address",
style: TextStyle(
fontSize: 10.0,
color: Color(0xFFD3B875),),),
],
),
],
),
),
SizedBox(height: 10.0),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Color(0xFFD3B875),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Email Address",
labelStyle:
TextStyle(color: Colors.black),
),
validator: (input) => !input.contains("#")
? 'Please enter a valid email'
: null,
onSaved: (input) => _email = input,
),
),
)),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Choose Password",
style: TextStyle(
fontSize: 10.0,
color: Color(0xFFD3B875),),),
],
),
],
),
),
SizedBox(height: 10.0),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Color(0xFFD3B875),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Password",
labelStyle:
TextStyle(color: Colors.black),
),
validator: (input) => input.length < 8
? 'Must be at least 8 characters'
: null,
onSaved: (input) => _password = input,
obscureText: true,
),
),
)),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Choose a Name",
style: TextStyle(
fontSize: 10.0,
color: Color(0xFFD3B875),),),
],
),
],
),
),
SizedBox(height: 10.0),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Color(0xFFD3B875),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Name",
labelStyle:
TextStyle(color: Colors.black),
),
validator: (input) => input.trim().isEmpty
? 'Enter a valid name'
: null,
onSaved: (input) => _name = input,
),
),
)),
SizedBox(height: 50),
Container(
width: 250.0,
child: FlatButton(
onPressed: _submit,
color: Colors.blue,
padding: EdgeInsets.all(10.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
),
),
SizedBox(height: 40),
Container(
height: 20,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Already have an account?",
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
SizedBox(width: 12.0),
InkWell(
onTap: () {
setState(() {
Navigator.pop(
context,
MaterialPageRoute(
builder: (context) =>
RegisterPage()));
});
},
child: Text(
"Login Here",
style: TextStyle(
color: Color.fromRGBO(211, 184, 117, 100),
fontSize: 12.0),
),
)
],
),
),
],
),
),
],
)
],
),
),
),
);
}
}
LOGIN SCREEN
HOT RELOAD ERROR - this occurs whether I changed something or not
I'm running your login screen code on dart pad and this is what i'm getting
your container thats holding your Email TextField is taking up 50% of the screen width and height.
I would suggest you remove the
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.5,
from your container .
I am designing a view for creating a group of users from firestore data. I want a view like whatsapp type create a group design. Below is my code :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
titleSpacing: 0.0,
centerTitle: true,
automaticallyImplyLeading: true,
leading: _isSearching ? const BackButton() : Container(),
title: _isSearching ? _buildSearchField() : Text("Create Group"),
actions: _buildActions(),
),
body: _buildGroupWidget(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
elevation: 5.0,
onPressed: () {
// create a group
createGroup();
},
child: Icon(
Icons.send,
color: Colors.white,
),
),
);
}
Widget _buildGroupWidget() {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
selectedUserList != null && selectedUserList.length > 0
? Container(
height: 90.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: selectedUserList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
selectedUserList.removeAt(index);
setState(() {});
},
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
child: Column(
children: <Widget>[
Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
// color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
color: Colors.primaries[
index % Colors.primaries.length],
),
),
Container(
height: 20.0,
width: 50.0,
child: Center(
child: Text(
selectedUserList[index].userName,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
height: 30,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.deepOrange,
boxShadow: [
BoxShadow(
color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Text(
"Contacts",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
userList != null && userList.length > 0
? ListView.builder(
shrinkWrap: true,
itemCount: userList.length,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
if (selectedUserList.contains(userList[index])) {
selectedUserList.remove(userList[index]);
} else {
selectedUserList.add(userList[index]);
}
setState(() {});
},
title: Text(userList[index].userName),
subtitle: Text(userList[index].userContact),
leading: CircleAvatar(
backgroundColor: Colors.primaries[index],
),
);
},
)
: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)))
],
),
);
}
The problem with my code is i want to center my last widget which is center widget which will be seen when there is no data. I want to set it to the center of the screen.
But, it not get to the center of the screen.
I have already tried with Expanded, Flex and other solutions from other resource references. But, it doesn't work for me.
Can anyone suggest me how to center my last widget ?
I think expanded should work wrapping your last widget.
Still, if it doesn't work for you then i you can remove the height of your other 2 widgets from full screen as your both widgets have static height which is 120 total here.
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height - 120,
child: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)),
))
This will solve your issue for your case.