Question 167770 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter change material3 button shape

I upgraded the flutter to version 3.10 recently and set useMaterial3: true as its default is true.

But I cannot change the button’s shape:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FilledButton(
          style: FilledButtonTheme.of(context).style?.copyWith(
                  shape: const MaterialStatePropertyAll<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                borderRadius: BorderRadius.zero,
              ))),
          onPressed: () {},
          child: const Text("Click"),
        ),
      ),
    );
  }
}

I want a square button (or any customized border), but every time the result is the same:
enter image description here

Update: without adding shape to button, it is the same as screen shot above.

Tags:

2

Answers


  1. 0

    So to need a square button you just remove the shape property of the button it can result in shard edged button

    Login or Signup to reply.
  2. 0

    Just override the border of the filled Button for all states.

    FilledButtonThemeData(
          style: ButtonStyle(
            shape: MaterialStateProperty.all(
              const RoundedRectangleBorder(
                borderRadius:
                    BorderRadius.all(Radius.circular(10)),
              ),
            ),
          ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search