• 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
Name
Last commit
Last update
..
bin Loading commit data...
data Loading commit data...
generated Loading commit data...
lib Loading commit data...
test Loading commit data...
README.md Loading commit data...
pubspec.yaml Loading commit data...
test.json Loading commit data...