Flutter中的开关

该开关的主要用途是在应用程序的深色和浅色主题之间切换。这取决于 UI 需要什么样的开关。在Flutter中，使用flutter_switch我们可以创建从简单到自定义的开关，具有自定义的高度、宽度、颜色、文本等。让我们在本文中看看它的用法和实现。

安装包：

要将其添加到项目中，请在 IDE 的终端中运行以下命令：

flutter pub add flutter_switch

或者在dependencies部分下手动添加，然后通过pub get进行配置。

Dart

flutter_switch: ^0.3.2

导入依赖：

在主要。 dart文件，导入flutter_switch依赖项。

Dart

import 'package:flutter_switch/flutter_switch.dart';

执行：

要创建开关，我们需要使用 FlutterSwitch() 小部件，其中包含以下属性：

• 切换大小
• 秀开关
• onToggle
• 活动颜色
• 非活动颜色
• 非活动图标等

让我们使用 FlutterSwitch() 小部件创建不同类型的开关。

简单开关：

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;
                });
              },
            ),

输出：

带边框切换：

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;
              });
            },
          ),

输出：

使用自定义文本切换：

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;
                 });
               },
             ),

输出：

用图标切换：

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;
                 });
               },
             ),

输出：

完整源代码：

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 {
  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: [
              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;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：