I have cleaned Flutter example from Scafflod and button and was expecting I get the same content, but without title bar and button:
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'My app title',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
#override
Widget build(BuildContext context) {
return new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
);
}
}
Unfortunately, what I got is not fit any gates:
What is it? How it happen to turn so big? How to fix?
You can wrap the text inside "Material" widget. Also, using "style:" parameter fixes the problem.
Material(
color: Colors.transparent,
child: Text(
"Your Text Here",
style: TextStyle(
fontFamily: 'custom font', // remove this if don't have custom font
fontSize: 20.0, // text size
color: Colors.white, // text color
),
),
)
Scaffold is setting the basic material design visual layout structure, which much include default text styles, etc. If you don't want to use Scaffold for whatever reason, then you can apply the relevant text styles and colours from the current theme using Theme.of(context). For example:
Text(
'You have pushed the button this many times:',
style: Theme.of(context).primaryTextTheme.headline,
textAlign: TextAlign.center,
),
Text(
'Sign in / Sign up with',
style: TextStyle(
fontFamily: appFontFamily,
fontSize: 20,
decoration: TextDecoration.none,////set decoration to .none
fontWeight: FontWeight.bold,
color: defaultTitleColor,
),
)
Related
how can I give color for the price in title? I have long text for the product، I need to give Different color for the price only, like this image
I used RichText but its not good
this below code is sample for RichText widget :)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: RichText(
text: const TextSpan(
text: 'خصومات تصل علی',
style: TextStyle(color: Colors.black),
children: <TextSpan>[
TextSpan(
text: ' 60% ',
style: TextStyle(fontWeight: FontWeight.bold,color: Colors.red)),
TextSpan(
text: ' علی ',
style: TextStyle(color: Colors.black)),
],
),
),
),
),
);
}
}
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',
),
),
),
);
}
}
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)
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.
I'am having trouble in having a TextField on the AppBar so the user can enter input similarly to using a search bar. I need to take the user input and do something with it so it's not a search within my app. This is why it makes senses to use a TextField.
Now, I've succeeded in having the TextField on the left side of my AppBar . The problem is that the TextField is a square and doesn't take enough space so you can see what you're writing.
Link to what it looks like:
In code this is how it was made:
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Myseum',
theme: new ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'Raleway',
),
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Myseum",
style: TextStyle(
fontFamily: 'Raleway',
fontStyle: FontStyle.italic,
fontSize: 25,
),
),
leading: prefix0.TextBox(), // TextBox is the widget I made.
backgroundColor: Colors.black,
),
Now the widget TextBox()
class TextBox extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.centerLeft,
color: Colors.white,
child: TextField(
decoration:
InputDecoration(border: InputBorder.none, hintText: 'Search'),
),
);
}
}
Like mentioned in the comments - put your text field in title widget... I converted your code to a simple stateful widget to give you an idea.
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool typing = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: typing ? TextBox() : Text("Title"),
leading: IconButton(
icon: Icon(typing ? Icons.done : Icons.search),
onPressed: () {
setState(() {
typing = !typing;
});
},
),
),
body: Center(
child: Text("Your app content"),
),
);
}
}
class TextBox extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.centerLeft,
color: Colors.white,
child: TextField(
decoration:
InputDecoration(border: InputBorder.none, hintText: 'Search'),
),
);
}
}