Problem with centering the flutter widget - flutter

There's a syntax error at "Center(". what could be wrong?
Here's the message i'm receiving: "Creates a widget that centers its child."
import 'package:flutter/material.dart';
class SplashPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
Center(
child: Text(
'n',
style: TextStyle(
color: Colors.black,
fontSize: 90,
fontFamily: 'Aclonica',
),
),
),
);
}
}

You should add "body:" before "Center(", because Scaffold doesn't have a positional parameters

The Scaffold takes the main widget in a parameter called body. So you should pass the Center widget in the body parameter of the Scaffold.
So something like,
Scaffold(
backgroundColor: Colors.white,
body: Center(
...
)
)

Try This:
import 'package:flutter/material.dart';
class SplashPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
child: Column(
mainAxisAlignment : MainAxisAlignment.center,
crossAxisAlignment : CrossAxisAlignment.center,
children : [
Text(
'n',
style: TextStyle(
color: Colors.black,
fontSize: 90,
fontFamily: 'Aclonica',
),])
),
);
}
}

Try This:
import 'package:flutter/material.dart';
class SplashPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment : MainAxisAlignment.center,
crossAxisAlignment : CrossAxisAlignment.center,
children : [
Text(
'n',
style: TextStyle(
color: Colors.black,
fontSize: 90,
fontFamily: 'Aclonica',
),])
),
);
}
}

When using a widget, it's best to read through it's documentation once. According to the Scaffold's documentation here, the content of the Scaffold should be placed within the body property, which is a positional parameter (means you need to state the param when initializing the Scaffold):
import 'package:flutter/material.dart';
class SplashPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center( // Just need to add the `body` property here
child: Text(
'n',
style: TextStyle(
color: Colors.black,
fontSize: 90,
fontFamily: 'Aclonica',
),
),
),
);
}
}

Related

calling setState from the parent widget in flutter does not update the state

Parent Widget
class _FamilyListPageState extends State<FamilyListPage> {
String initialValue = 'Search Families';
void eraseInitialValue() { <-------------- This function is passed down to the child widget
setState(() {
initialValue = '';
print('Inside the set state'); <-------- This line gets executed.
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Search Families'),
centerTitle: true,
),
backgroundColor: StaticEntry.backColor,
body: Center(
child: FractionallySizedBox(
widthFactor: 0.8,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SearchInput( <----------------------------------------- Child Widget
initialValue: initialValue,
onTapHandler: eraseInitialValue,
),
],
),
),
),
),
);
}
}
Child Widget
import 'package:flutter/material.dart';
class SearchInput extends StatelessWidget {
final String initialValue;
final Function onTapHandler; <----------- Function from the parent widget is stored in here
SearchInput({this.initialValue, this.onTapHandler});
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: Icon(
Icons.search,
size: 40,
),
title: Container(
child: TextFormField(
initialValue: initialValue,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
letterSpacing: 1),
onTap: onTapHandler, <--------------- This is where I have made a pointer at the function received from the parent widget to be executed when tapped.
),
),
),
),
);
}
}
Background
I have a child widget which holds a TextFormField. The initialValue of that TextFormField is 'Search Families'. I am trying to erase that initial value when the user taps on that TextFormField so the user can type what he/she wants in that TextFormField without erasing it manually by themselves.
What I have done
To achieve this I have made my parent widget a stateful widget. State of my parent widget has an instance variable called initialValue that holds the value 'Search Families' which is used to configure the initialValue property of the TextFormField inside the child widget.
Then I have defined a method inside the parent widget called eraseInitialValue which resets the value of the initialValue instance variable to an empty string by calling the setState.
Finally inside the child widget, I am giving a pointer at this function for the onTap property of the TextFormField to execute the declared function which in turn should update the state of the application.
Problem
However, the text 'Search Families' never changes.
(I added a print statement inside the setState to see if the function holding the setState gets executed. It indeed does. But the state is not updated.)
Can someone help me understand this code is not working? Thanks.
onTapHandler() instead onTapHandler in SearchInput class
have you tried using GestureDetector? Please update your code and give feedback.
Parent Widget
class _FamilyListPageState extends State<FamilyListPage> {
String initialValue = 'Search Families';
void eraseInitialValue() { <-------------- This function is passed down to the child widget
setState(() {
initialValue = '';
print('Inside the set state'); <-------- This line gets executed.
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Search Families'),
centerTitle: true,
),
backgroundColor: StaticEntry.backColor,
body: Center(
child: FractionallySizedBox(
widthFactor: 0.8,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () { eraseInitialValue(); },
child: SearchInput( <----------------------------------------- Child Widget
initialValue: initialValue,
//onTapHandler: eraseInitialValue,
),
),
],
),
),
),
),
);
}
}
Child Widget
import 'package:flutter/material.dart';
class SearchInput extends StatelessWidget {
final String initialValue;
final Function onTapHandler; <----------- Function from the parent widget is stored in here
SearchInput({this.initialValue, this.onTapHandler});
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: Icon(
Icons.search,
size: 40,
),
title: Container(
GestureDetector(
onTap: () { onTapHandler(); },
child: TextFormField(
initialValue: initialValue,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
letterSpacing: 1),
),
),
),
),
),
);
}
}

Background image not setting to white | adding styling to text

Kind of two questions in one here... still new to flutter and learning as I go.
My background color will not change to white. All resources on flutter.dev did not seem viable. Currently, I am using the most suggested answer which is that of backgroundColor: Colors.white. Any thoughts as to why this is not working?
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Onboarding1',
theme: ThemeData(
backgroundColor: Colors.white,
fontFamily: 'fonts/Avenir-Bold',
visualDensity: VisualDensity.adaptivePlatformDensity,
),
);
}
}```
I want to be able to style the text in the column, but TextStle is throwing an error. What is the best way to adjust the text style when in a column? Would it just be best to use a scaffold?
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Image.asset(
"assets/Onboarding1_Photo.png",
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Column(
children: <Widget>[
Text('Some Text'),
style: TextStyle(
)
],
)
],
);
}
}
Update based on the answer... What am I still doing wrong?
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Onboarding1',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
fontFamily: 'fonts/Avenir-Bold',
visualDensity: VisualDensity.adaptivePlatformDensity,
),
);
}
}
class Onboarding1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Image.asset(
"assets/Onboarding1_Photo.png",
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Column(
children: <Widget>[
Text('Some Text', style: TextStyle(fontSize: 24)),
],
),
],
),
);
}
}
Updated Answer with example:
class Onboarding1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Image.asset(
"assets/Onboarding1_Photo.png",
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Column(
children: <Widget>[
Text('Some Text', style: TextStyle(fontSize: 24)),
],
),
],
),
);
}
}
Original Answer :
The field you're looking for in your ThemeData is scaffoldBackgroundColor.
ThemeData(
scaffoldBackgroundColor: Colors.white,
fontFamily: 'fonts/Avenir-Bold',
visualDensity: VisualDensity.adaptivePlatformDensity),
Then wrap your column in a scaffold and it'll work.
As for your text style, in your code the style is outside of the text widget and it needs to be inside and you need to define a TextStyle with the properties.
Text('Some Text',
style: TextStyle(
color: Colors.blue,
fontSize: 20),
),
Admittedly styling text in Flutter is a bit verbose for my taste. For that reason I have my own reusabe custom text widget that saves time on my most used properties of text.
class MyTextWidget extends StatelessWidget {
final String text;
final double fontSize;
final Color color;
final double spacing;
const MyTextWidget(
{Key key, this.text, this.fontSize, this.color, this.spacing})
: super(key: key);
#override
Widget build(BuildContext context) {
return Text(
text != null ? text : ' ',
// this is part of the google fonts package it won't work if you don't have it in your project but you get the idea
style: kGoogleFontOpenSansCondensed.copyWith(
fontSize: fontSize ?? 20,
color: color ?? Colors.white70,
letterSpacing: spacing ?? 1.0),
);
}
}
Then when I need a text widget it looks like this
MyTextWidget(
text: 'Some text',
fontSize: 25,
color: Colors.white54)

Flutter - How do I create this Signup Form?

I'm trying to place an input form field underneath my text which says please enter your email. Could anyone assist? The thing I'm having the biggest problem with right now is I don't know how to add anything else below the text. Ideally, I'd like a centred input field. Code is below:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(MyApp());
}
class MyCustomForm extends StatefulWidget {
#override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Enter your email'),
),
]),
);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Bench',
home: Stack(children: [
new Scaffold(
body: new Container(
decoration: BoxDecoration(color: Colors.pinkAccent),
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Text(
"Hello, Let's Get Started...",
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
fontFamily: 'Oswald',
color: Colors.black),
),
),
),
),
]));
}
}
You can wrap the text with a Column to append widgets underneath each other (Video). You can view more information Here. This video also helps with general layouts (link).
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyCustomForm extends StatefulWidget {
#override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Enter your email'),
),
]),
);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Bench',
home: Stack(
children: [
Scaffold(
body: Container(
width: double.infinity,
decoration: BoxDecoration(color: Colors.pinkAccent),
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Hello, Let's Get Started...",
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
fontFamily: 'Oswald',
color: Colors.black,
),
),
MyCustomForm(),
],
),
),
),
),
],
),
);
}
}
You probably have trouble to find how to add multiples widgets as the child of your Scaffold.
I suggest you to check out the official documentation on layouts
You'll learn there how to create more complex layout and how you can add an input text field under a text widget.

Getting Error in flutter MediaQuery.of() called with a context that does not contain a MediaQuery

I didn't understand what the error is. I am returning a Scaffold widget. There are no syntax errors detected by visual studio code. I am getting an error while running the app.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("here is my text")),
body: Text(
'No, we need bold strokes. We need this plan.',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue.withOpacity(0.7),
height: 1,
fontSize: 20,
decoration: TextDecoration.underline,
decorationColor: Colors.green,
decorationStyle: TextDecorationStyle.wavy,
backgroundColor: Colors.red),
),
);
}
}
If I wrap the scaffold widget in the material app it is working. Can anyone explain to me the reason?
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("here is my text")),
body: Text(
'No, we need bold strokes. We need this plan.',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue.withOpacity(0.7),
height: 1,
fontSize: 20,
decoration: TextDecoration.underline,
decorationColor: Colors.green,
decorationStyle: TextDecorationStyle.wavy,
backgroundColor: Colors.red),
),
),
);
}
}
The top most widget must be wrapped in a MaterialApp widget. This is what generates the context chain that it's looking for.
Media Query is a property of MaterialApp so if you don't use the MaterialApp, you can't access media query. The proper way is to use it in your main class.

How to make flutter TextField at bottom of screen show over IME

My page is a SingleChildScrollView,it's has a column as child .And I have a TextField at bottom of the screen.
How can I make the TextField show over of IME when IME is expend.
now the TextField is covered by IME. And it is invisible,util scroll manually.
demo code
import 'package:flutter/material.dart';
class Demo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
elevation: 0.0,
title: new Text(
'title',
),
),
body: new Home(),
),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new SingleChildScrollView(
child: new Column(
children: <Widget>[
new ImageZone(),
new Div(),
new TextEditZone(),
new Div(),
],
),
);
}
}
class ImageZone extends StatefulWidget {
#override
State<StatefulWidget> createState() => new ImageZoneState();
}
class ImageZoneState extends State<ImageZone> {
#override
Widget build(BuildContext context) {
return new Material(
elevation: 1.0,
color: Colors.white,
child: new Container(
height: 380.0,
width: double.infinity,
child: new Icon(
Icons.access_time,
size: 360.0,
),
),
);
}
}
class Div extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new SizedBox(
height: 12.0,
);
}
}
class TextEditZone extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return new TextEditZoneState();
}
}
class TextEditZoneState extends State<TextEditZone> {
#override
Widget build(BuildContext context) {
return new Material(
elevation: 1.0,
child: new Container(
width: double.infinity,
color: Colors.white,
padding: new EdgeInsets.all(16.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new TextField(
style: new TextStyle(fontSize: 14.0),
textAlign: TextAlign.end,
),
new Div(),
new TextField(
style: new TextStyle(fontSize: 14.0),
textAlign: TextAlign.end,
),
new Div(),
new TextField(
style: new TextStyle(fontSize: 14.0),
textAlign: TextAlign.end,
),
],
),
),
);
}
}
screen Shot:
What I want:
TextField auto scroll over IME when I click one of TextField.
Your problem was solved in this example here
, Please go through and wrap all your TextField 's inside EnsureVisibleWhenFocused and this will bring the TextField just above the keyboard.
Regards,
Mahi