翩翩平按钮颜色属性不工作

Question

在flutter App中，我试图为FlatButton设置颜色，但它没有工作，请看下面的源代码。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: SafeArea(
      child: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            FlatButton(
              color: Colors.red,
            ),
            FlatButton(
              color: Colors.green,
            ),
            FlatButton(
              color: Colors.blue,
            ),
          ],
        ),
      ),
    ));
  }
}

输出。

我是flutter初学者，请问我的代码有什么问题？

先谢谢你

Answer 1

你需要提供child和onPressed参数来渲染widget，否则它不会渲染，导致UI无法工作。

看看我修改的代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: SafeArea(
      child: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            FlatButton(
              color: Colors.red,
              onPressed:()=>printData(),
              child: Text("click"),
            ),
            FlatButton(
              color: Colors.green,
              onPressed:()=>printData(),
              child: Text("click"),
            ),
            FlatButton(
              color: Colors.blue,
              onPressed:()=>printData(),
              child: Text("click"),
            ),
          ],
        ),
      ),
    ));
  }
}

void printData(){
  print('Hello');
}

Answer 2

看看FlatButton构造函数中的@required字段，如果没有这些字段，它将无法渲染。

这是一个带有必填字段的Flat按钮。添加你想要的颜色来渲染它，如果没有颜色，它将以黑色文本和白色背景渲染。

FlatButton(
  onPressed: () {
    /*...*/
  },
  child: Text(
    "Flat Button",
  ),
)