• Furkan Acar's avatar
    Add `SegmentedButton.styleFrom` (#137542) · 83ac7605
    Furkan Acar authored
    fixes https://github.com/flutter/flutter/issues/138289
    
    ---
    
    SegmentedButtom.styleFrom has been added to the segment button, so there is no longer any need to the button style from the beginning. It works like ElevatedButton.styleFrom only I added selectedForegroundColor, selectedBackgroundColor. In this way, the user will be able to change the color first without checking the MaterialState states. I added tests of the same controls.
    
    #129215 I opened this problem myself, but I was rejected because I handled too many items in a PR. For now, I wrote a structure that only handles MaterialStates instead of users.
    
    old (still avaliable)
    <img width="626" alt="image" src="https://github.com/flutter/flutter/assets/65075121/9446b13b-c355-4d20-bda2-c47a23d42d4f">
    
    new (just an option for developer)
    <img width="483" alt="image" src="https://github.com/flutter/flutter/assets/65075121/0a645257-4c83-4029-9484-bd746c02265f">
    
    ### Code sample
    
    <details>
    <summary>expand to view the code sample</summary> 
    
    ```dart
    import 'package:flutter/material.dart';
    
    /// Flutter code sample for [SegmentedButton].
    
    void main() {
      runApp(const SegmentedButtonApp());
    }
    
    enum Calendar { day, week, month, year }
    
    class SegmentedButtonApp extends StatefulWidget {
      const SegmentedButtonApp({super.key});
    
      @override
      State<SegmentedButtonApp> createState() => _SegmentedButtonAppState();
    }
    
    class _SegmentedButtonAppState extends State<SegmentedButtonApp> {
      Calendar calendarView = Calendar.day;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(useMaterial3: true),
          home: Scaffold(
            body: Center(
              child: SegmentedButton<Calendar>(
                style: SegmentedButton.styleFrom(
                  foregroundColor: Colors.amber,
                  visualDensity: VisualDensity.comfortable,
                ),
                // style: const ButtonStyle(
                //   foregroundColor: MaterialStatePropertyAll<Color>(Colors.deepPurple),
                //   visualDensity: VisualDensity.comfortable,
                // ),
                segments: const <ButtonSegment<Calendar>>[
                  ButtonSegment<Calendar>(
                      value: Calendar.day,
                      label: Text('Day'),
                      icon: Icon(Icons.calendar_view_day)),
                  ButtonSegment<Calendar>(
                      value: Calendar.week,
                      label: Text('Week'),
                      icon: Icon(Icons.calendar_view_week)),
                  ButtonSegment<Calendar>(
                      value: Calendar.month,
                      label: Text('Month'),
                      icon: Icon(Icons.calendar_view_month)),
                  ButtonSegment<Calendar>(
                      value: Calendar.year,
                      label: Text('Year'),
                      icon: Icon(Icons.calendar_today)),
                ],
                selected: <Calendar>{calendarView},
                onSelectionChanged: (Set<Calendar> newSelection) {
                  setState(() {
                    calendarView = newSelection.first;
                  });
                },
              ),
            ),
          ),
        );
      }
    }
    
    ```
    
    </details>
    83ac7605
segmented_button.1_test.dart 1.32 KB