Flutter ElevatedButton not inheriting ButtonThemeData shape

Question

I have supplied a ButtonThemeData to my top level ThemeData with a specific shape. Regardless of this, ElevatedButton has the default shape.

I have my top level theme defined as such...

return ScopedModel<MyModel>(
      model: _model,
      child: MaterialApp(
        title: "MyApp",
        theme: ThemeData(
          fontFamily: 'Din',
          colorScheme: MyLightTheme.colorScheme,
          inputDecorationTheme: MyLightTheme.inputDecorationTheme,
          accentColor: MyColors.secondary,
          errorColor: MyLightTheme.colorScheme.error,
          primarySwatch: MyColors.primarySwatch,
          buttonTheme: ButtonThemeData(
            shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(18.0),
             side: BorderSide(color: Colors.red)
           )
         )
        ),
        debugShowCheckedModeBanner: false,
        home: EntryScreen(),
        routes: <String, WidgetBuilder>{
          
        }
      )
    );

I have defined a simple FlatButton as follows...

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

The FlatButton just draws white, when buttonColor is not white.

Answer 1

You can copy paste run full code below
You can use elevatedButtonTheme and set ButtonStyle's shape
code snippet

ThemeData(
          fontFamily: 'Din',
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ButtonStyle(
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.red))))))

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      theme: ThemeData(
          fontFamily: 'Din',
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ButtonStyle(
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.red)))))),
      debugShowCheckedModeBanner: false,
      home: EntryScreen(),
    );
  }
}

class EntryScreen extends StatefulWidget {
  EntryScreen({Key key}) : super(key: key);

  @override
  _EntryScreenState createState() => _EntryScreenState();
}

class _EntryScreenState extends State<EntryScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                /*...*/
              },
              child: Text(
                "Flat Button",
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

wrap the ElevatedButton with the Theme widget

Theme(
      data: ThemeData(
        primaryColor: Theme.of(context).accentColor
      ),
      child:ElevatedButton(
            onPressed: () {
              /*...*/
            },
            child: Text(
              "Flat Button",
            ),
          )
    );