背景图像未设置为白色 |为文本添加样式

Question

这里将两个问题合二为一...对于扑腾和学习仍然很陌生。

1. 我的背景颜色不会变为白色。 flutter.dev 上的所有资源似乎都不可行。目前，我使用的建议最多的答案是backgroundColor: Colors.white。关于为什么这不起作用的任何想法？

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

1. 我希望能够为列中的文本设置样式，但 TextStle 抛出错误。在列中调整文本样式的最佳方法是什么？使用脚手架会更好吗？

@覆盖

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

根据答案更新...我仍然做错了什么？

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

用示例更新答案：

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

原答案： 您在 ThemeData 中查找的字段是 scaffoldBackgroundColor。

ThemeData(
   scaffoldBackgroundColor: Colors.white,
   fontFamily: 'fonts/Avenir-Bold',
   visualDensity: VisualDensity.adaptivePlatformDensity),

然后将您的专栏包裹在脚手架中，它会起作用。

至于您的文本样式，在您的代码中，style 在文本小部件之外，它需要在里面，您需要使用属性定义一个 TextStyle。

Text('Some Text',
 style: TextStyle(
  color: Colors.blue, 
  fontSize: 20),
),

诚然，在 Flutter 中设置文本样式对我来说有点冗长。出于这个原因，我有自己的可重用自定义文本小部件，可以节省我最常用的文本属性的时间。

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

然后当我需要一个文本小部件时，它看起来像这样

MyTextWidget(
   text: 'Some text', 
   fontSize: 25, 
   color: Colors.white54)