EP.6 How to Integrate Slide to Unlock Action in a Flutter App

January 6, 2022

Overview

In the following code snippet we use the slide to unlock library to create a clone of iPhone Lock Screen with Flutter. You can use this template to add the slide to unlock action in your own apps.

Source Code

import 'package:intl/intl.dart';
import 'package:flutter/material.dart';
import 'package:slide_to_act/slide_to_act.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/ep6.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const SizedBox(
              height: 70,
            ),
            Text(
              DateFormat('HH:mm').format(DateTime.now()),
              style: const TextStyle(
                color: Colors.white,
                fontSize: 80,
                fontWeight: FontWeight.w600,
              ),
            ),
            Text(
              DateFormat('EEEE, dd MMMM').format(DateTime.now()),
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 21,
                  fontWeight: FontWeight.w400),
            ),
            const Spacer(),
            SlideAction(
              text: "Slide to Unlock",
              borderRadius: 60,
              height: 75,
              outerColor: Color(0xFFFEDD6C4),
              innerColor: Color(0xFFF33161A),
              sliderRotate: false,
              onSubmit: () => {
                //Perform required action here, once the slider is fully transversed
                print("unlocked"),
              },
            )
          ],
        ),
      ),
    );
  }
}