Night Color Widget in Flutter

Night Color adjusts the color temperature of your screen according to your surroundings. This may help your eyes hurt less if you are working in front of the screen at night.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml file

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder. From the command line:

flutter pub add night_color

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Step 3: Import the package into the main file or dart code

import 'package:night_color/night_color.dart';

Step 4: Return the NightColor Widget

Returning the NightColor WIdget that allows us to set it child and enabled property.

Code:

Dart

import 'package:flutter/material.dart';
import 'package:night_color/components/night_color.dart';

void main() {
  runApp(const RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Night Color',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool enabled = true;

  @override
  Widget build(BuildContext context) {
    return NightColor(
      enabled: enabled,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Night Color'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                "test night color",
              ),
              Switch(
                value: enabled,
                onChanged: (value) {
                  setState(() {
                    enabled = value;
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output: