Background image not setting to white | adding styling to text - flutter

Question

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)),
],
),
],
),
);
}
}

Answer 1

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)