How to manage native looks of switch widget in flutter

user_6159856 0
Viewed 4801

I want to create switch/toggle widget in Flutter/Dart with native looks of different OS.

I mean if I run on iOS mobile it should be looks like:

enter image description here

If I run on Android mobile it should be looks like :

enter image description here

Help me to achieve this type of functionality in flutter/dart

flutter-layout dart flutter
2 Answers

Use Switch.adaptive

Creates a CupertinoSwitch if the target platform is iOS, creates a material design switch otherwise.

Switch.adaptive(value: true, onChanged: (newValue) {})

Sample code:

bool _value = true;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Switch.adaptive(
      value: _value,
      onChanged: (newValue) => setState(() => _value = newValue),
    ),
  );
}
user_66186220

You can check what platform the user is on and then display the appropriate platform-specific widget. Switch is the Android widget for toggles and CupertinoSwitch is the iOS equivalent. The arguments are the same for both widgets so CopsOnRoad's solution is a bit more succinct but this is another way to get platform-specific widgets. 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:io';

Platform.isAndroid ? Switch() : CupertinoSwitch()
user_103943530
Related