Card.outlined doesn't apply border if custom CardThemeData applied (even without side parameter) #178611

Activity

1. tirth-patel-nc

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Nov 17, 2025
2. tirth-patel-nc commented on Nov 17, 2025

   

   tirth-patel-nc

   on Nov 17, 2025

   Member

   More actions

   @Nazacheres thanks for the report. as per the docs, it seems to be working as intended. please let me know if I misunderstood your query.

   abstract class OutlinedBorder extends ShapeBorder {
     /// Abstract const constructor. This constructor enables subclasses to provide
     /// const constructors so that they can be used in const expressions.
     const OutlinedBorder({this.side = BorderSide.none});
   
     /// The border outline's color and weight.
     ///
     /// If [side] is [BorderSide.none], which is the default, an outline is not drawn.
     /// Otherwise the outline is centered over the shape's boundary.
     final BorderSide side;
   
      /// ...
   }
3. tirth-patel-nc

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Nov 17, 2025
4. Nazacheres commented on Nov 17, 2025

   

   Nazacheres

   on Nov 17, 2025

   Author

   More actions

   @tirth-patel-nc hm, seems like we are looking into different parts of documentation. Here's how I follow my usage:
   Card.outlined( ->
   has followig constructor:

     const Card.outlined({
       super.key,
       this.color,
       this.shadowColor,
       this.surfaceTintColor,
       this.elevation,
       this.shape,
       this.borderOnForeground = true,
       this.margin,
       this.clipBehavior,
       this.child,
       this.semanticContainer = true,
     }) : assert(elevation == null || elevation >= 0.0),
          _variant = _CardVariant.outlined;
   

   the first place the _variant variable is used is in build method of the card:

   
     @override
     Widget build(BuildContext context) {
       final CardThemeData cardTheme = CardTheme.of(context);
       final CardThemeData defaults;
       if (Theme.of(context).useMaterial3) {
         defaults = switch (_variant) {
           _CardVariant.elevated => _CardDefaultsM3(context),
           _CardVariant.filled => _FilledCardDefaultsM3(context),
           _CardVariant.outlined => _OutlinedCardDefaultsM3(context),
         };
       } else {
         defaults = _CardDefaultsM2(context);
       }
   ...
   

   so later these default are used here in build method return:

       return Semantics(
         container: semanticContainer,
         child: Padding(
           padding: margin ?? cardTheme.margin ?? defaults.margin!,
           child: Material(
   ...          
   shape: shape ?? cardTheme.shape ?? defaults.shape,
   ...
   

   so if I read this correctly
   shape - is the direct parameter of the Card constructor - makes sense, if you want to override - go for it in-line
   cardTheme.shape - that's my theme, where I have custom elevation and corner radius - ok
   defaults.shape - my variant's default shape induced by the constructor I used in place - ok

   accroding to the variants docs:

   /// Material Design 3 introduced new types of cards. The default [Card] is the
   /// elevated card. To create a filled card, use [Card.filled]; to create a outlined
   /// card, use [Card.outlined].
   /// {@tool dartpad}
   /// This sample shows creation of [Card] widgets for elevated, filled and
   /// outlined types, as described in: https://m3.material.io/components/cards/overview
   ///
   

   therefore my understanding is that current logic and order of priority of shape application is incorrect cause instead of "adding the outline" the logic is "adding the outline, unless you have card theme applied".

   Please correct me if I am wrong.
5. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Nov 17, 2025
6. tirth-patel-nc commented on Nov 18, 2025

   

   tirth-patel-nc

   on Nov 18, 2025

   Member

   More actions

   the card theme shape completely overrides the outlined variant shape, so the default outline is removed unless you explicitly add a side. as shown below, you only get the border back when you specify shape.side yourself. given this behavior, does it seem correct that cardthemedata.shape fully replaces the outlined card defaults instead of merging with them?

   Without CardThemeData.shape.side

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(const App());
   }
   
   class App extends StatelessWidget {
     const App({super.key});
   
     @override
     Widget build(BuildContext context) {
       const sizecornermedium = 12.0;
   
       final scheme = ColorScheme.fromSeed(seedColor: Colors.blue);
       final typography = Typography.material2021();
   
       return MaterialApp(
         home: Scaffold(
           body: Center(
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
                 Card.outlined(
                   clipBehavior: Clip.hardEdge,
                   child: SizedBox(
                     width: 100,
                     height: 100,
                     child: Image.asset('assets/test.webp'),
                   ),
                 ),
               ],
             ),
           ),
         ),
         theme: ThemeData(
           useMaterial3: true,
           colorScheme: scheme,
           typography: typography,
           cardTheme: CardThemeData(
             elevation: 0,
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.all(Radius.circular(sizecornermedium)),
             ),
           ),
         ),
       );
     }
   }

   

   ---

   With CardThemeData.shape.side

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(const App());
   }
   
   class App extends StatelessWidget {
     const App({super.key});
   
     @override
     Widget build(BuildContext context) {
       const sizecornermedium = 12.0;
   
       final scheme = ColorScheme.fromSeed(seedColor: Colors.blue);
       final typography = Typography.material2021();
   
       return MaterialApp(
         home: Scaffold(
           body: Center(
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
                 Card.outlined(
                   clipBehavior: Clip.hardEdge,
                   child: SizedBox(
                     width: 100,
                     height: 100,
                     child: Image.asset('assets/test.webp'),
                   ),
                 ),
               ],
             ),
           ),
         ),
         theme: ThemeData(
           useMaterial3: true,
           colorScheme: scheme,
           typography: typography,
           cardTheme: CardThemeData(
             elevation: 0,
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.all(Radius.circular(sizecornermedium)),
               side: BorderSide(color: scheme.outline, width: 1),
             ),
           ),
         ),
       );
     }
   }

   

   ---

   Without CardThemeData

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(const App());
   }
   
   class App extends StatelessWidget {
     const App({super.key});
   
     @override
     Widget build(BuildContext context) {
       const sizecornermedium = 12.0;
   
       final scheme = ColorScheme.fromSeed(seedColor: Colors.blue);
       final typography = Typography.material2021();
   
       return MaterialApp(
         home: Scaffold(
           body: Center(
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
                 Card.outlined(
                   clipBehavior: Clip.hardEdge,
                   child: SizedBox(
                     width: 100,
                     height: 100,
                     child: Image.asset('assets/test.webp'),
                   ),
                 ),
               ],
             ),
           ),
         ),
         theme: ThemeData(
           useMaterial3: true,
           colorScheme: scheme,
           typography: typography,
         ),
       );
     }
   }

   
7. tirth-patel-nc

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Nov 18, 2025
8. Nazacheres commented on Nov 18, 2025

   

   Nazacheres

   on Nov 18, 2025

   Last edited by Nazacheres

   Author

   More actions

   @tirth-patel-nc thanks for a fast response, I don't want to waste your time and clearly there's a workaround, so if we don't understand each other, lets just close, I'll try last time:

   The examples you provided make sense, where existing logic falls apart is when you do custom theme, but don't override the shape - Card.outlined doesn't apply border in that case.

   ThemeData(
           useMaterial3: true,
           colorScheme: scheme,
           typography: typography,
           cardTheme: CardThemeData(
             elevation: 0,
           ),
         ),
       );
   

   Therefore, you are probably right - I can't point at part of the documenation, which would define this as a bug, but this
   shape: shape ?? cardTheme.shape ?? defaults.shape, seems to be

   1. Incosistent - other *ThemeData class properties work like that - unless you override them the default material values are applied. But here, the mere existence of the card theme, overrides the default outline shape - which is 1 width of the border all around the card.
   2. Limiting - unless there's a dedicated OutlineCardThemeData, the mere existance of custom CardThemeData renders custom card constructors unusable.

   If you do not agree, feel free to close this. If you do, let me know how I can help to move this forward.
   Thanky you for your time.
9. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Nov 18, 2025
10. tirth-patel-nc commented on Nov 19, 2025

    

    tirth-patel-nc

    on Nov 19, 2025

    Last edited by tirth-patel-nc

    Member

    More actions

    shape property needs a ShapeBorder and in example we use RoundedRectangleBorder that extends the OutlinedBorder and its Docs says:

      /// Abstract const constructor. This constructor enables subclasses to provide
      /// const constructors so that they can be used in const expressions.
      const OutlinedBorder({this.side = BorderSide.none});

    It seems to be WAI. I'll keep it open as documentation issue if there's a room for improvement.
11. tirth-patel-nc

    added

    d: api docsIssues with https://api.flutter.dev/Issues with https://api.flutter.dev/

    f: themingStyling widgets with a themeStyling widgets with a theme

    p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

    team-designOwned by Design Languages teamOwned by Design Languages team

    frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

    d: examplesSample code and demosSample code and demos

    and removed

    in triagePresently being triaged by the triage teamPresently being triaged by the triage team

    on Nov 19, 2025
12. dkwingsmt

    added

    P2Important issues not at the top of the work listImportant issues not at the top of the work list

    triaged-designTriaged by Design Languages teamTriaged by Design Languages team

    on Nov 19, 2025
13. dkwingsmt commented on Nov 19, 2025

    

    dkwingsmt

    on Nov 19, 2025

    Last edited by dkwingsmt

    Contributor

    More actions

    I agree that this is WAI. The border configuration is part of shape and will be overridden by the same value either the property or the theme as a whole.

    The following snippet reproduces the problem and compares various usages side by side.

    

    Repro code

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const App());
    }
    
    class App extends StatelessWidget {
      const App({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(theme: ThemeData.dark(), home: const Demo());
      }
    }
    
    class Demo extends StatelessWidget {
      const Demo({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Theme(
            data: ThemeData(
              useMaterial3: true,
            ),
            child: Column(
              children: [
                const Text('M3 Card.outlined - default:'),
                const Card.outlined(
                  clipBehavior: Clip.hardEdge,
                  child: SizedBox(
                      width: 100,
                      height: 100,
                      child: ColoredBox(color: Color(0xFFAA3300))),
                ),
                const Text('M3 Card.outlined with theme shape:'),
                Theme(
                  data: ThemeData(
                    cardTheme: const CardThemeData(
                        elevation: 0,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(10)))),
                  ),
                  child: const Card.outlined(
                    clipBehavior: Clip.hardEdge,
                    child: SizedBox(
                        width: 100,
                        height: 100,
                        child: ColoredBox(color: Color(0xFFAA3300))),
                  ),
                ),
                const Text('M3 Card.outlined with theme shape that defines side:'),
                Theme(
                  data: ThemeData(
                    cardTheme: const CardThemeData(
                        elevation: 0,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            side: BorderSide(color: Colors.white))),
                  ),
                  child: const Card.outlined(
                    clipBehavior: Clip.hardEdge,
                    child: SizedBox(
                        width: 100,
                        height: 100,
                        child: ColoredBox(color: Color(0xFFAA3300))),
                  ),
                ),
    
                const Text('M3 Card.outlined with property shape:'),
                const Card.outlined(
                  clipBehavior: Clip.hardEdge,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10))),
                  child: SizedBox(
                      width: 100,
                      height: 100,
                      child: ColoredBox(color: Color(0xFFAA3300))),
                ),
                const Text('M3 Card.outlined with property shape that defines side:'),
                const Card.outlined(
                  clipBehavior: Clip.hardEdge,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      side: BorderSide(color: Colors.white)),
                  child: SizedBox(
                      width: 100,
                      height: 100,
                      child: ColoredBox(color: Color(0xFFAA3300))),
                ),
    
                const Text('To recreate with the default color:'),
                Builder(
                  builder: (BuildContext context) => Card.outlined(
                    clipBehavior: Clip.hardEdge,
                    shape: RoundedRectangleBorder(
                        borderRadius: const BorderRadius.all(Radius.circular(10)),
                        side: BorderSide(
                            color: ColorScheme.of(context).outlineVariant)),
                    child: const SizedBox(
                        width: 100,
                        height: 100,
                        child: ColoredBox(color: Color(0xFFAA3300))),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    

    I agree that we can use a clearer documentation. Thanks for the discussion and I'll make a PR soon.

    ❤️React with ❤️1Reacted by Tirth Patel
14. github-merge-queue

    added a commit that references this issue on Dec 17, 2025

    Improve the documentation of `Card` (#178834)

    ...

    5fa6c12
15. auto-submit

    closed this as completedin #178834on Dec 17, 2025
16. tirth-patel-nc

    added

    r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version

    on Dec 18, 2025
17. harryterkelsen

    added a commit that references this issue on Dec 19, 2025

    Squashed commit of the following:

    ...

    c0e5c67
18. github-actions commented on Jan 1, 2026

    

    github-actionsbot

    on Jan 1, 2026 – with GitHub Actions

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
19. github-actions

    locked as resolved and limited conversation to collaborators on Jan 1, 2026
20. chunhtai

    added a commit that references this issue on Jun 12, 2026

    Improve the documentation of `Card` (#178834)

    ...

    eebe9fe
21. Nakiha

    added a commit that references this issue on Sep 28, 2026

    Improve the documentation of `Card` (#178834)

    ...

    88f4e7f