• Taha Tesser's avatar
    Fix `Chip.shape`'s side is not used when provided in Material 3 (#132941) · 612117a6
    Taha Tesser authored
    fixes [Chip border side color not working in Material3](https://github.com/flutter/flutter/issues/132922)
    
    ### Code sample
    
    <details> 
    <summary>expand to view the code sample</summary> 
    
    ```dart
    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(
          theme: ThemeData(
            useMaterial3: true,
            chipTheme: const ChipThemeData(
                // shape: RoundedRectangleBorder(
                //   side: BorderSide(color: Colors.amber),
                //   borderRadius: BorderRadius.all(Radius.circular(12)),
                // ),
                // side: BorderSide(color: Colors.red),
                ),
          ),
          home: const Example(),
        );
      }
    }
    
    class Example extends StatelessWidget {
      const Example({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const Scaffold(
          body: Center(
            child: RawChip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              // side: BorderSide(color: Colors.red),
              label: Text('Chip'),
            ),
          ),
        );
      }
    }
    
    ``` 
    
    </details>
    
    ---
    
    ### Before
    
    When `RawChip.shape` is provided with a `BorderSide`.
    
    ```dart
          body: Center(
            child: RawChip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              label: Text('Chip'),
            ),
          ),
    ```
    
    ![Screenshot 2023-08-24 at 17 54 54](https://github.com/flutter/flutter/assets/48603081/89e2c9b5-44c2-432e-97ff-8bb95b0d0fb1)
    
    When `RawChip.shape` is provided with a `BorderSide` and also `RawChip.side` is provided. The  `RawChip.side` overrides the shape's side.
    
    ```dart
          body: Center(
            child: RawChip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              side: BorderSide(color: Colors.red),
              label: Text('Chip'),
            ),
          ),
    ```
    
    ![Screenshot 2023-08-24 at 17 55 37](https://github.com/flutter/flutter/assets/48603081/938803cc-d514-464b-b06b-e4841b9ad040)
    
    ---
    
    ### After
    
    When `RawChip.shape` is provided with a `BorderSide`.
    
    ```dart
          body: Center(
            child: RawChip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              label: Text('Chip'),
            ),
          ),
    ```
    
    ![Screenshot 2023-08-24 at 17 51 29](https://github.com/flutter/flutter/assets/48603081/d6fcaaa9-8f5d-4180-ad14-062dd459ec45)
    
    When `RawChip.shape` is provided with a `BorderSide` and also `RawChip.side` is provided. The  `RawChip.side` overrides the shape's side.
    
    ```dart
          body: Center(
            child: RawChip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              side: BorderSide(color: Colors.red),
              label: Text('Chip'),
            ),
          ),
    ```
    
    ![Screenshot 2023-08-24 at 17 52 31](https://github.com/flutter/flutter/assets/48603081/3fa46341-43f0-4fe7-a922-f1d8ba34028c)
    
    ---
    612117a6
chip_theme_test.dart 38.6 KB