El principal uso visto del interruptor es cambiar entre el tema oscuro y claro de la aplicación. Depende de la interfaz de usuario qué tipo de interruptor se requiere. En Flutter, con flutter_switch podemos crear desde interruptores simples hasta personalizados con alto, ancho, colores, texto, etc. Veamos su uso e implementación en este artículo.
Paquete de instalación :
Para agregarlo al proyecto, ejecute el siguiente comando en la terminal de IDE:
flutter pub add flutter_switch
O agréguelo manualmente en la sección de dependencias y luego configúrelo a través de pub get.
Dart
flutter_switch: ^0.3.2
Importar la dependencia:
En el archivo main.dart , importe la dependencia flutter_switch .
Dart
import 'package:flutter_switch/flutter_switch.dart';
Implementación:
Para crear un interruptor, necesitamos usar el widget FlutterSwitch() que incluye propiedades como:
- alternar tamaño
- showOnOff
- onToggle
- coloractivo
- Color inactivo
- icono inactivo, etc.
Vamos a crear diferentes tipos de interruptores usando el widget FlutterSwitch().
Cambio sencillo:
Dart
FlutterSwitch(
activeColor: Colors.green,
width: 125.0,
height: 55.0,
valueFontSize: 25.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 8.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
Producción:
Cambiar con bordes:
Dart
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
toggleColor: Colors.black12,
switchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
toggleBorder: Border.all(
color: Colors.white,
width: 5.0,
),
activeColor: Colors.green,
inactiveColor: Colors.black38,
onToggle: (val) {
setState(() {
status = val;
});
},
),
Producción:
Cambiar con texto personalizado:
Dart
FlutterSwitch(
activeText: "I am Active",
inactiveText: "I am Inactive",
value: status,
valueFontSize: 16.0,
width: 140,
height: 80,
borderRadius: 30.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
Producción:
Cambiar con icono:
Dart
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
activeToggleColor: Colors.purple,
inactiveToggleColor: Colors.black,
activeSwitchBorder: Border.all(
color: Colors.orange,
width: 6.0,
),
inactiveSwitchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
activeColor: Colors.deepPurpleAccent,
inactiveColor: Colors.white,
activeIcon: Icon(
Icons.nightlight_round,
color: Colors.white,
),
inactiveIcon: Icon(
Icons.wb_sunny,
color: Color(0xFFFFDF5D),
),
onToggle: (val) {
setState(() {
status = val;
});
},
),
Producción:
Código fuente completo:
Dart
import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color _textColor = Colors.green;
Color _appBarColor = Colors.green;
bool status = false;
bool isSwitchOn = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30,
),
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
toggleColor: Colors.black12,
switchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
toggleBorder: Border.all(
color: Colors.white,
width: 5.0,
),
activeColor: Colors.green,
inactiveColor: Colors.black38,
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 20.0),
FlutterSwitch(
width: 125.0,
height: 55.0,
valueFontSize: 25.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 8.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 20.0),
FlutterSwitch(
activeText: "I am Active",
inactiveText: "I am Inactive",
value: status,
valueFontSize: 16.0,
width: 140,
height: 80,
borderRadius: 30.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 10.0),
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
activeToggleColor: Colors.purple,
inactiveToggleColor: Colors.black,
activeSwitchBorder: Border.all(
color: Colors.orange,
width: 6.0,
),
inactiveSwitchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
activeColor: Colors.deepPurpleAccent,
inactiveColor: Colors.white,
activeIcon: Icon(
Icons.nightlight_round,
color: Colors.white,
),
inactiveIcon: Icon(
Icons.wb_sunny,
color: Color(0xFFFFDF5D),
),
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 20.0),
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
activeToggleColor: Colors.purple,
inactiveToggleColor: Colors.white,
activeSwitchBorder: Border.all(
color: Colors.green,
width: 6.0,
),
inactiveSwitchBorder: Border.all(
color: Colors.deepPurple,
width: 6.0,
),
activeColor: Colors.greenAccent,
inactiveColor: Colors.blueAccent,
activeIcon: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/7/7e/Dart-logo.png"),
inactiveIcon: Image.network(
"https://img2.pngio.com/functional-bits-in-flutter-flutter-community-medium-flutter-png-1000_1000.png"),
onToggle: (val) {
setState(() {
status = val;
});
},
),
],
),
),
),
);
}
}
Producción: