2023/6/20/Flutter/use .adaptive() constructors

platform-adaptations

Widgets with .adaptive() constructors

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool switchValue = false;
  double sliderValue = 0.0;
  bool checkboxValue = false;
  int radioValue = 0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Switch.adaptive(
              value: switchValue,
              onChanged: (newValue) {
                setState(() {
                  switchValue = newValue;
                });
              },
            ),

            Slider.adaptive(
              value: sliderValue,
              onChanged: (newValue) {
                setState((){
                  sliderValue = newValue;
                });
              },
            ),

            CircularProgressIndicator.adaptive(),

            Checkbox.adaptive(
              value: checkboxValue,
              onChanged:(newValue){
                setState((){
                  checkboxValue = newValue ?? false;
                });
              },
            ),

            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(children:[
                Column(
                  children: [
                    Text('0'),
                    SizedBox(height:10.0,),
                    Transform.scale(
                      scale: 2.0,
                      child: Radio.adaptive(
                        value: 0,
                        groupValue: radioValue,
                        onChanged: (newValue){
                          setState((){
                            radioValue = newValue!;
                          });
                        },
                      ),
                    ),
                  ],
                ),
                SizedBox(width:40.0,),
                Column(
                  children: [
                    Text('1'),
                    SizedBox(height:10.0,),
                    Transform.scale(
                      scale: 2.0,
                      child: Radio.adaptive(
                        value: 1,
                        groupValue: radioValue,
                        onChanged: (newValue){
                          setState((){
                            radioValue = newValue!;
                          });
                        },
                      ),
                    ),
                  ],
                ),
                SizedBox(width:40.0,),
                Column(
                  children: [
                    Text('2'),
                    SizedBox(height:10.0,),
                    Transform.scale(
                      scale: 2.0,
                      child: Radio.adaptive(
                        value: 2,
                        groupValue: radioValue,
                        onChanged: (newValue){
                          setState((){
                            radioValue = newValue!;
                          });
                        },
                      ),
                    ),
                  ],
                ),
              ],),
            ),
          ],
        ),
      ),
    );
  }
}

こういうの、あるみたいです!

It seems to work!

iOSでラジオボタンが小さいと感じたのでTransform.scaleを使ったら大きくできました。

I felt the radio button was small on iOS, so I used Transform.scale to make it bigger.