Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
Closed Caption

Define a Theme

Code

Repository

https://github.com/tinycasts/notee/tree/feature/episode_04

Adobe XD App Design

Download here

Fonts


Snippets

1. App Colors

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

class AppColors {
  // http://chir.ag/projects/name-that-color/
  Color get sanMarino => Color(0xFF4059AD);
  Color get glacier => Color(0xFF6B9AC4);
  Color get vistaBlue => Color(0xFF97D8C4);
  Color get blackHaze => Color(0xFFEFF2F1);
  Color get cornflowerBlue => Color(0xFF6C63FF);
  Color get redRibbon => Color(0xFFEF172A);
}

2. LayoutTheme

default.dart
class LayoutTheme extends StatefulWidget {
  final Widget child;

  LayoutTheme({ this.child });

  @override
  LayoutThemeState createState() => LayoutThemeState();

  static LayoutThemeState of(BuildContext context) {
    return (
      context.inheritFromWidgetOfExactType(_InheritedStateContainer) as _InheritedStateContainer
    ).data;
  }
}

class LayoutThemeState extends State<LayoutTheme> {
  LinearGradient get background => LinearGradient(
    begin: Alignment.bottomRight,
    end: Alignment.topLeft,
    stops: [0.1, 0.85],
    colors: [
      this.colors.sanMarino,
      this.colors.vistaBlue
    ]
  );

  AppColors get colors => AppColors();

  @override
  Widget build(BuildContext context) {
    return _InheritedStateContainer(
      data: this,
      child: widget.child,
    );
  }
}

_InheritedStateContainer

class _InheritedStateContainer extends InheritedWidget {
  final LayoutThemeState data;

  _InheritedStateContainer({
    Key key,
    @required this.data,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(_InheritedStateContainer old) => true;
}

3. Main File

First, you surround your app with the LayoutTheme

main.dart
class Notee extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutTheme(
      child: MaterialApp(
        title: 'Notee',
        debugShowCheckedModeBanner: false,
        home: Home(),
      ),
    );
  }
}

then you just use colors from the context

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LayoutTheme.of(context).background
        ),
        child: Center(child: Text('Home')),
      )
    );
  }
}

Discuss

Loading comments...