simple_design 1.0.3 copy "simple_design: ^1.0.3" to clipboard
simple_design: ^1.0.3 copied to clipboard

The Simple Design library for Flutter. It provides premade themes aswell as custom widgets for easy designing.

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: () {},
                    )
                  ],
                ),
              )
            ]))
          ],
        ),
      ),
    );
  }
}
1
likes
40
pub points
0%
popularity

Publisher

unverified uploader

The Simple Design library for Flutter. It provides premade themes aswell as custom widgets for easy designing.

Repository (GitHub)
View/report issues

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on simple_design