Flutter Flat Button Color Property Not Working

Question

In flutter App I'm trying to set color for the FlatButton But it's not working. find the source code below.

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

Output:

I'm flutter Beginner, Any Idea What is the issue in my code?

Thanks In Advance

Solution 1

You need to provide child and onPressed parameter in order to render the widget, else it won't render, which results in non working UI.

Check out the code i modified :

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

Solution 2

Have a look at the @required fields of the FlatButton Constructor without which it would not render.

This is a Flat button with required fields. Add your desired color to this to render it. Without a color it renders with black text and white background.

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

Comments

[Sridhar Karuppusamy]

Thanks for your answer. it's very useful to me

[Aditya Patnaik]

glad that it helped!

[mousetail]

Welcome to SO, please post code directly in the answer rather than as a screenshot

[Sridhar Karuppusamy]

Can you please post a screenshot what you exactly got in mobile devices. If that button colour is not apply?

[Sridhar Karuppusamy]

Inside set null to onpress method please use any of the dummy method. So we can trail and error to find to solution for this