simple_design 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 60

simple_design #

A simple design library for Flutter.

This package includes:

  • Premade themes, dark and light brightness
  • Several custom Simple Design widgets, serving the original design idea.

Link to the example images: https://imgur.com/a/duatQYT

For general design advice I used the Material Design Specifications from material.io.

Font #

I recommend using the free-for-commercial font "HK Grotesk", which is used in the example and also defined as the standart font in the themes.

But really and sans-serif, geometric or grotesk typeface should work well (for example Lineto Circular).

SDAppBar and SDSliverAppBar #

These two widgets are meant to be used instead of the regular AppBar/SliverAppBar. They use certain styling that otherwise would have to be applied to every AppBar in your app.

They are customizable with title, leading, actions, bottom, automaticallyImplyLeading and flexibeSpace. The other values are not customizable to not negatively impact the appearance of your app.

SDAppBar and SDSliverAppBar

SDDialog with SDDismissButton and SDActionButton #

This is a custom dialog and should be used in the showDialog() method instead of AlertDialog or SimpleDialog. It can be given values for title, content, a SDDismissButton for a dismiss button, a SDActionButton for an action button and a bool barrierDismissable, which is not yet working.

The SDDismissButton and SDActionButton should be self-explaining.

SDDialog with SDDismissButton and SDActionButton

SDDivider and SDSectionHeader #

Designed for the use in Colums and Lists, the SDDivider provides a vertical padding of 36.0 pixels, which is recommended, but can be customized with the height property.

The SDSectionHeader is to be used below a SDDivider to announce the title of a new section, as it can be seen in the example application.

SDSectionHeader

SDCard #

The SDCard widget is a highly customizable card, with options for mediaContent, content, title, subtitle, actions and backgroundColor. It has a slight shadow underneath and is best used in Colums and Lists.

SDCard

[1.0.0] - 16.12.2018. #

  • Initial Release with Light and Dark Themes and several widgets.

[1.0.1] - 16.12.2018. #

  • Minor fixes

[1.0.2] - 16.12.2018. #

  • Minor fixes

[1.0.3] - 16.12.2018. #

  • Fixed a brightness bug in the AppBar

example/lib/main.dart

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

final ThemeData theme = SimpleDesign.darkTheme;

void main() {
  runApp(MyApp());
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: theme.backgroundColor.withOpacity(0.2),
      systemNavigationBarColor: theme.scaffoldBackgroundColor,
      systemNavigationBarDividerColor:
          theme.brightness == Brightness.light ? Colors.black : Colors.white,
      systemNavigationBarIconBrightness: theme.brightness == Brightness.light
          ? Brightness.dark
          : Brightness.light,
    ),
  );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Design',
      color: theme.scaffoldBackgroundColor,
      debugShowCheckedModeBanner: false,
      theme: theme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  double sliderValue = 0.3;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      initialIndex: 1,
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SDSliverAppBar(
                actions: <Widget>[
                  IconButton(
                    icon: Icon(Icons.star),
                    onPressed: () {},
                  )
                ],
                pinned: false,
                snap: true,
                floating: true,
                bottom: TabBar(tabs: [
                  Tab(
                    icon: Icon(Icons.slideshow),
                    text: "Slideshow",
                  ),
                  Tab(
                    icon: Icon(Icons.favorite_border),
                    text: "Favorites",
                  ),
                  Tab(
                    icon: Icon(Icons.music_note),
                    text: "Music",
                  ),
                ]),
                title: RichText(
                    text: TextSpan(
                        text: "Simple ",
                        style: Theme.of(context).textTheme.title,
                        children: [
                      TextSpan(
                          text: "Design",
                          style: Theme.of(context)
                              .textTheme
                              .title
                              .copyWith(fontWeight: FontWeight.normal))
                    ]))),
            SliverList(
                delegate: SliverChildListDelegate([
              SDDivider(
                height: 12.0,
              ),
              SDSectionHeader("Dialog and Button"),
              ListTile(
                leading: Icon(Icons.call_to_action),
                trailing: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    FlatButton(onPressed: () {}, child: Text("Flat Button")),
                    SizedBox(
                      width: 8.0,
                    ),
                    FlatButton(
                      color: Theme.of(context).primaryColor,
                      child: Text("Show Dialog"),
                      onPressed: () => showDialog(
                          context: context,
                          builder: (context) => SDDialog(
                                actionButton: SDActionButton(
                                  title: "Get Started",
                                  onPressed: () => Navigator.of(context).pop(),
                                ),
                                dismissButton: SDDismissButton(
                                  onPressed: () => Navigator.of(context).pop(),
                                  title: "Dismiss",
                                ),
                                title: "Welcome to Simple Design!",
                                content: Text(
                                  "With Simple Design we try to make the designing "
                                      "of your apps as simple, yet beautiful as possible, "
                                      "so you can focus on the important aspects of your app!",
                                ),
                              )),
                    ),
                  ],
                ),
              ),
              SDDivider(),
              SDSectionHeader("TextField"),
              ListTile(
                leading: Icon(Icons.text_fields),
                title: TextField(
                  decoration: InputDecoration(hintText: "Put in your username"),
                ),
              ),
              SDDivider(),
              SDSectionHeader("Slider"),
              ListTile(
                leading: Icon(Icons.adjust),
                title: Slider(
                    value: sliderValue,
                    onChanged: (n) {
                      setState(() {
                        sliderValue = n;
                      });
                    }),
              ),
              ListTile(
                leading: Icon(Icons.vertical_align_center),
                title: Slider(
                    divisions: 5,
                    label: (sliderValue * 10).toStringAsFixed(0),
                    value: sliderValue,
                    onChanged: (n) {
                      setState(() {
                        sliderValue = n;
                      });
                    }),
              ),
              ListTile(
                leading: Icon(Icons.location_disabled),
                title: Slider(
                  divisions: 5,
                  value: sliderValue,
                  onChanged: null,
                ),
              ),
              SDDivider(),
              SDSectionHeader("Cards"),
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: SDCard(
                  mediaContent: Image.asset(
                    "assets/flower.jpg",
                    fit: BoxFit.cover,
                  ),
                  title: "Our Beautiful Planet",
                  subtitle: "by Manfred Richter",
                  content: Text(
                      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
                      "sed diam nonumy eirmod tempor invidunt ut labore et dolore"
                      " magna aliquyam erat, sed diam voluptua. At"),
                  actions: <Widget>[
                    FlatButton(onPressed: () {}, child: Text("Read")),
                    IconButton(
                      icon: Icon(Icons.star_border),
                      color: theme.brightness == Brightness.light
                          ? Theme.of(context).primaryColor
                          : Theme.of(context).iconTheme.color,
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.share),
                      color: theme.brightness == Brightness.light
                          ? Theme.of(context).primaryColor
                          : Theme.of(context).iconTheme.color,
                      onPressed: () {},
                    )
                  ],
                ),
              )
            ]))
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  simple_design: ^1.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:simple_design/simple_design.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
71
Overall:
Weighted score of the above. [more]
60
Learn more about scoring.

We analyzed this package on Apr 1, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Maintenance suggestions

Package is getting outdated. (-29.04 points)

The package was last published 67 weeks ago.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test