DEV Community: Erick Murai

Implementing Neumorphic design in flutter without a package

Erick Murai — Sat, 30 Apr 2022 17:56:43 +0000

In recent times, few concepts have rocked the UI/UX design world in a fashion similar to the neumorphic design craze. Dribbble and behance are littered with designs illustrating the use of this design pattern in web or mobile apps. It's a minimal design thus very appealing to the eye due to its softness and uniqueness in a design landscape where popping, shouting colors are all the rave.
Luckily, we can implement these great designs in our flutter apps and make them stand out from the crowd(of apps*). I shall implement both a dark and light neumorphic design. For this demonstration, I shall use a simple fintech app UI sample I created.
Here is the source code
Firstly,we shall begin with the light version. We shall implement a base theme widget that shall hold all global theme properties that shall apply throughout the app. We shall use a scaffold background color of Color.grey[300] to enable use apply neumorphic shadows that pop effectively.

ThemeData lightThemeData(BuildContext context) {
  return ThemeData.light().copyWith(
      scaffoldBackgroundColor: Colors.grey[300],
}

Next, we shall create a box decoration variable that we shall use throughout the app to create a light box-shadow that shall create the popping effect present in neumorphic designs

final BoxDecoration decorator = BoxDecoration(
      [
              BoxShadow(
                  color: Colors.grey.shade500,
                  offset: Offset(4, 4),
                  blurRadius: 15,
                  spreadRadius: 1),
              BoxShadow(
                spreadRadius: 1,
                color: Colors.white,
                offset: Offset(-4, -4),
                blurRadius: 15,
              )
            ]);

If we want to add the neumorphic shadow to any widget that we use for example, container, we'll just add the decorator variable to the decoration property.

 Container(
              height: size.height * 0.07,
              width: size.width * 0.4,
              decoration: decorator.copyWith(
                  borderRadius: BorderRadius.circular(30.0),
                  color: Colors.greenAccent),)

In certain instances, we might want to add a depression effect in our neumorphic design language so as to create an illusion of a depression on the screen as illustrated in the image below. This can also be created with flutter
We shall create a decoration and box painter widget and add the colors we shall use to create the concave decoration effect

class SecondDecoration extends Decoration {
  final ShapeBorder? shape;
  final double? depression;
  final List<Color>? colors;

  SecondDecoration({
    @required this.shape,
    @required this.depression,
    this.colors,
  })  : assert(shape != null),
        assert(depression! >= 0),
        assert(colors == null || colors.length == 2);

  @override
  BoxPainter createBoxPainter([void onChanged]) =>
      _SecondDecorationPainter(shape!, depression!, colors!);

  @override
  EdgeInsetsGeometry get padding => shape!.dimensions;
}

class _SecondDecorationPainter extends BoxPainter {
  ShapeBorder shape;
  double depression;
  List<Color> colors;

  _SecondDecorationPainter(this.shape, this.depression, this.colors) {
    colors = [
      // Colors.black,
      // Colors.grey.shade800,
        Colors.black87,
       Colors.white
    ];
  }

  @override
  void paint(
      ui.Canvas canvas, ui.Offset offset, ImageConfiguration configuration) {
    final rect = offset & configuration.size!;
    final shapePath = shape.getOuterPath(rect);

    final delta = 16 / rect.longestSide;
    final stops = [0.5 - delta, 0.5 + delta];

    final path = Path()
      ..fillType = PathFillType.evenOdd
      ..addRect(rect.inflate(depression * 2))
      ..addPath(shapePath, Offset.zero);
    canvas.save();
    canvas.clipPath(shapePath);

    final paint = Paint()
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, depression);
    final clipSize = rect.size.aspectRatio > 1
        ? Size(rect.width, rect.height / 2)
        : Size(rect.width / 2, rect.height);
    for (final alignment in [Alignment.topLeft, Alignment.bottomRight]) {
      final shaderRect =
          alignment.inscribe(Size.square(rect.longestSide), rect);
      paint.shader = ui.Gradient.linear(
          shaderRect.topLeft, shaderRect.bottomRight, colors, stops);

      canvas.save();
      canvas.clipRect(alignment.inscribe(clipSize, rect));
      canvas.drawPath(path, paint);
      canvas.restore();
    }
    canvas.restore();
  }
}

We shall then pass this Decoration widget as an argument to the decoration property of a container widget.We shall then pass a pair of colors that shall give us a concave depression decoration effect in our container

Container(
                height: 60,
                decoration: SecondDecoration(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        depression: 10,
                        colors: [
                            Color.fromRGBO(216, 213, 208, 1),
                            Colors.white
                          ]))

And voila. We can now create a light neumorphic shadow and depression effect in our flutter apps.
Next up, we shall replicate the same in dark mode.
Firstly,we shall add a global dark theme with a dark scaffold color that shall enable us to create a dark neumorphic design.

ThemeData darkThemeData(BuildContext context) {
  return ThemeData.dark().copyWith(
      scaffoldBackgroundColor:Colors.grey[900],
      );
}

We shall then create a dark neumorphic shadow that shall create a popping effect. This shall be done by creating a decorator variable that shall hold the BoxDecoration object with the necessary box-shadow

final BoxDecoration decorator = BoxDecoration(
      [
              BoxShadow(
                  color: Colors.black,
                  offset: Offset(5, 5),
                  blurRadius: 15,
                  spreadRadius: 5),
              BoxShadow(
                spreadRadius: 1,
                color: Colors.grey.shade800,
                offset: Offset(-4, -4),
                blurRadius: 15,
              )
            ]);

We can now use this variable within the container widget down the widget tree.

Container(
              height: size.height * 0.07,
              width: size.width * 0.4,
              decoration: decorator.copyWith(
                  borderRadius: BorderRadius.circular(30.0),
                  color: Colors.greenAccent),)

We shall then create a dark concave depression neumorphic effect with Decoration and box painter widgets.

class ConcaveDecoration extends Decoration {
  final ShapeBorder? shape;
  final double? depression;
  final List<Color>? colors;

  ConcaveDecoration({
    @required this.shape,
    @required this.depression,
    this.colors,
  })  : assert(shape != null),
        assert(depression! >= 0),
        assert(colors == null || colors.length == 2);

  @override
  BoxPainter createBoxPainter([void onChanged]) =>
      _ConcaveDecorationPainter(shape!, depression!, colors!);

  @override
  EdgeInsetsGeometry get padding => shape!.dimensions;
}

class _ConcaveDecorationPainter extends BoxPainter {
  ShapeBorder shape;
  double depression;
  List<Color> colors;

  _ConcaveDecorationPainter(this.shape, this.depression, this.colors) {
    colors = [
      Colors.black,
      Colors.grey.shade800,
      //   Colors.black87,
      //  Colors.white
    ];
  }

  @override
  void paint(
      ui.Canvas canvas, ui.Offset offset, ImageConfiguration configuration) {
    final rect = offset & configuration.size!;
    final shapePath = shape.getOuterPath(rect);

    final delta = 16 / rect.longestSide;
    final stops = [0.5 - delta, 0.5 + delta];

    final path = Path()
      ..fillType = PathFillType.evenOdd
      ..addRect(rect.inflate(depression * 2))
      ..addPath(shapePath, Offset.zero);
    canvas.save();
    canvas.clipPath(shapePath);

    final paint = Paint()
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, depression);
    final clipSize = rect.size.aspectRatio > 1
        ? Size(rect.width, rect.height / 2)
        : Size(rect.width / 2, rect.height);
    for (final alignment in [Alignment.topLeft, Alignment.bottomRight]) {
      final shaderRect =
          alignment.inscribe(Size.square(rect.longestSide), rect);
      paint.shader = ui.Gradient.linear(
          shaderRect.topLeft, shaderRect.bottomRight, colors, stops);

      canvas.save();
      canvas.clipRect(alignment.inscribe(clipSize, rect));
      canvas.drawPath(path, paint);
      canvas.restore();
    }
    canvas.restore();
  }
}

Here is how it appears
We can now use this concave decoration effect in container widgets within our widget tree

Container(
                height: 60,
                decoration:ConcaveDecoration(
                        colors: [Colors.black, Colors.grey.shade800],
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        depression: 10))

The result is a great looking dark mode neumorphic design for our apps.
Here is a video illustrating the feel and look of the sample app.
In the app, I also implement functionality enabling toggling between light mode and dark mode. I offered an explanation on how to implement that functionality here
Thanks for reading until the end and stay tuned for more flutter tips in future.

Implementing biometric authentication in flutter

Erick Murai — Fri, 29 Apr 2022 15:07:55 +0000

With biometric authentication, we are able to verify users of our apps based on the biological characteristics of the users of our app. This can be done by checking if a user's fingerprint or face matches his/her fingerprint/face id in the phone. This method of authentication has gained popularity in the recent past especially with fintech apps that require a high level of security. They use it to verify that the user is indeed who they say they are. The uniqueness of our fingerprints and faces makes biometric authentication one of the most secure ways of verifying a user's identity.
We shall create a simple project with three screens, a login screen, a signup screen and a homepage.
The entire code for the project is available here
We shall use firebase for authentication and the Lottie package for some animations to spruce up our app. We shall then add these packages to our pubspec.yaml file at the root of our project folder.

dependencies:
  flutter:
    sdk: flutter
  firebase_auth:
  lottie:

Now onto the main subject of discussion which is biometric authentication. For this, we shall need to use the flutter_secure_storage package that shall enable us store the login details which in our case shall be an email and password securely. This package uses the AES encryption standard that ensures the security of our data.
Next up, the local_auth package. We shall use this to access the local on-device authentication mechanisms for our users. On Android, this is the fingerprint biometric authentication method while on IOS, this is the touch code, Face ID or lock code authentication mechanism. We shall then add these to our pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  local_auth:
  flutter_secure_storage:

Please note that for the local_auth package to work in IOS, we need to add a user defaults permission allowing the use of Face ID in our app. This shall be added in our info.plist file which is located in [project]/ios/Runner/info.plist

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

Additionally, for the package to work in android, we need to add this piece of code to our MainActivity.java page which is located in [project]/android/app/main/java/MainActivity.java

import android.os.Bundle;
import io.flutter.app.FlutterFragmentActivity;
import io.flutter.plugins.flutter_plugin_android_lifecycle.FlutterAndroidLifecyclePlugin;
import io.flutter.plugins.localauth.LocalAuthPlugin;

public class MainActivity extends FlutterFragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FlutterAndroidLifecyclePlugin.registerWith(
                registrarFor(
                        "io.flutter.plugins.flutter_plugin_android_lifecycle.FlutterAndroidLifecyclePlugin"));
        LocalAuthPlugin.registerWith(registrarFor("io.flutter.plugins.localauth.LocalAuthPlugin"));
    }
}

We also have to add the USE_FINGERPRINT and USE_BIOMETRIC permissions in our AndroidManifest.xml file which is located in [project]/android/app/src/main/AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_FINGERPRINT"/>
 <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<manifest>

Additionally, we should set the minSdkVersion in[project]/android/app/build.gradle to >= 18 so as to enable flutter_secure_storage to work

android {
    ...

    defaultConfig {
        ...
        minSdkVersion 18
        ...
    }

}

Firstly, we shall create a new user in our app with firebase auth in our signup screen

class AuthService{
 signUp(String email, String password, context) async {
    try {
      await FirebaseAuth.instance
          .createUserWithEmailAndPassword(email: email, password: password);
    } on FirebaseAuthException catch (e) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(e.message.toString())));
    }
  }
}

Next, we shall create our login page where the bulk of our biometric authentication logic shall be contained. We shall create localauth and storage variables that we shall use throughout the page.

final LocalAuthentication localAuth = LocalAuthentication();
final storage = const FlutterSecureStorage();

We should now go ahead and check if the device supports biometric authentication or not.

final canCheck = await localAuth.canCheckBiometrics;
final deviceIsSupported = await localAuth.isDeviceSupported();

Afterwards, we shall get the available biometrics on the device.

List<BiometricType> availableBiometrics =
    await auth.getAvailableBiometrics();

if (Platform.isIOS) {
    if (availableBiometrics.contains(BiometricType.face)) {
        // Face ID.
    } else if (availableBiometrics.contains(BiometricType.fingerprint)) {
        // Touch ID.
    }
}

We shall use a boolean flag bool _useTouchId = false; that shall check whether the user has checked to use biometric authentication upon first login and if so, we shall write the values of the user's email and password to flutter_secure_storage for storage and later retrieval if we use biometric authentication.

  final authenticated = await localAuth.authenticate(
                localizedReason: 'Enable Face ID to sign in more easily',
                useErrorDialogs: true,
                stickyAuth: true);

            if (authenticated) {
              storage.write(key: 'email', value: email);
              storage.write(key: 'password', value: password);
              storage.write(key: 'usingBiometric', value: 'true');
            }

In subsequent logins, if we intend to use biometric authentication, we shall go ahead and read the email and password values from flutter_secure_storage for authentication.

 final authenticated = await localAuth.authenticate(
                localizedReason: 'Enable Face ID to sign in more easily');

            if (authenticated) {
              String? userStoredEmail = await storage.read(
                key: 'email',
              );
              String? userStoredPassword = await storage.read(
                key: 'password',
              );
              AuthService()
                  .signIn(userStoredEmail!, userStoredPassword!, context);
            }

And that's it !!! All that's remaining is for us to create a simple homescreen with a logout button.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

import 'loginpage.dart';

class HomePage extends StatelessWidget {
   HomePage({Key? key}) : super(key: key);
final _auth=FirebaseAuth.instance;
Color greenColor = const Color(0xFF00AF19);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  Center(
        child: Text('Home screen',style: TextStyle(color: greenColor,fontWeight: FontWeight.w700,fontSize: 35),),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: greenColor,
        onPressed: ()async {
          await _auth.signOut();
          Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => LoginPage()));
        },
        child:const  Icon(Icons.logout,),
      ),
    );
  }
}

And voila!!! Our app has a reliable and safe biometric authentication system.
Here is the project's source code and here is a video demo of the end result
Thanks for reading until the end (long read, I know)*. Stay tuned for more flutter tips in future

Implementing persistent dark mode in flutter

Erick Murai — Fri, 29 Apr 2022 09:40:18 +0000

A modern staple of present day UI/UX design is the implementation of functionality that enables switching between dark mode and light mode within apps. Luckily for us flutter developers, we can implement this too in DART. In our app, we shall use the toggle button and not rely on the phone's theme. We also want to persist our theme thus we shall use the provider package for app-wide theming and shared preferences to persist our theme.
The source code for the project can be found here
Firstly, we shall create a simple UI to demonstrate this. I've gone for a fintech sample app frontend for the purposes of demonstration

import 'package:darkmode/home/homepage.dart';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';


void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Flutter Demo',
            home: HomePage(),
          );

  }
}

Secondly, we shall create a class in which we can define light theme and dark theme using ThemeData that enables us define the visual theme. We shall also pass various properties within the ThemeData such as iconTheme, appBarTheme and textTheme.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
ThemeData lightThemeData(BuildContext context) {
  return ThemeData.light().copyWith(
      visualDensity: VisualDensity.adaptivePlatformDensity,
      scaffoldBackgroundColor: Colors.white,
      appBarTheme: appBarTheme,
      iconTheme:const IconThemeData(color: Colors.black),

     textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.black));
}

ThemeData darkThemeData(BuildContext context) {
  return ThemeData.dark().copyWith(
      visualDensity: VisualDensity.adaptivePlatformDensity,
      scaffoldBackgroundColor:const Color(0xFF1D1D35),
      appBarTheme: appBarTheme,
      iconTheme:const IconThemeData(color: Colors.white),

      textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.white));
}

const appBarTheme = AppBarTheme(centerTitle: false, elevation: 0);

Thirdly, we shall add the Provider package and shared preferences package .We shall use the provider package to enable the switching of the app-wide theme and the shared preferences package to store the persisted theme details thus when we exit the app and open it up again, the theme shall persist.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:shared_preferences/shared_preferences.dart';


class ThemeProvider extends ChangeNotifier {
 final String key = "theme";
 late SharedPreferences _prefs;
 late bool _darkTheme;

  bool get  darkTheme => _darkTheme;

  ThemeProvider() {
    _darkTheme = true;
    _loadFromPrefs();
  }

  toggleTheme() {
    _darkTheme = !_darkTheme;
    _saveToPrefs();
    notifyListeners();
  }

  _initPrefs() async {
    // if(_prefs == null)
      _prefs = await SharedPreferences.getInstance();
  }

  _loadFromPrefs() async {
    await _initPrefs();
    _darkTheme = _prefs.getBool(key) ?? true;
    notifyListeners();
  }

  _saveToPrefs()async {
    await _initPrefs();
    _prefs.setBool(key, _darkTheme);
  }
}

With this done we shall go back to the Materialapp in main.dart and wrap the MaterialApp widget with a ChangeNotifierProvider widget that listens to the ChangeNotifier widget in its descendants and rebuilds dependents whenever ChangeNotifier.notifyListeners is called. We also wrap the MaterialApp widget with the Consumer widget that calls provider.of for us and listens to changes in our theme thus rebuilds it whenever necessary.

import 'package:darkmode/home/homepage.dart';
import 'package:darkmode/provider/theme_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (_) => ThemeProvider(),
        child: Consumer<ThemeProvider>(
            builder: (context, ThemeProvider notifier, child) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: notifier.darkTheme
                ? darkThemeData(context)
                : lightThemeData(context),
            debugShowCheckedModeBanner: false,
            home: HomePage(),
          );
        }));
  }
}

We shall now create a switch button that can toggle between light and dark mode. We shall listen to changes in the ThemeProvider by wrapping our Switch button with the consumer widget.

import 'package:darkmode/provider/theme_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';


class ChangeThemeButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, notifier, child) => Switch.adaptive(
        value: notifier.darkTheme,
        onChanged: (val) {
          notifier.toggleTheme();
          //bool value of switch which is true or false
        },
        activeTrackColor: Colors.green[100],
        inactiveTrackColor: Colors.green[300],
      ),
    );
  }
}

I created a fintech frontend as an easy way to demonstrate the switch between dark mode and light mode whose source code can be found here
Here is the result:
Theme Video

Thanks for the read up and stay tuned for more articles on flutter development.