Skip to content

Prototype implementation of the new design for buttons and button themes.

License

Notifications You must be signed in to change notification settings

HansMuller/flutter_buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

flutter_buttons

A prototype implementation of the new design for buttons and button themes.

For more information about the design and to provide feedback please visit:

Sample

Here's a trivial example of the new button classes and their themes.

// pubspec.yaml must contain a dependency on the prototype flutter_buttons package
//
//  flutter_buttons:
//    git: [email protected]:HansMuller/flutter_buttons.git

import 'package:flutter/material.dart';

import 'package:flutter_buttons/flutter_buttons.dart';

class Buttons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextButton (
            onPressed: () { },
            child: Text('TextButton'),
          ),
          SizedBox(height: 16),
          ContainedButton(
            onPressed: () { print('ContainedButton'); },
            child: Text('ContainedButton'),
          ),
          SizedBox(height: 16),
          OutlinedButton(
            onPressed: () { },
            child: Text('OutlinedButton'),
          ),
        ],
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final TextStyle headline4 = Theme.of(context).textTheme.headline4;
    return Scaffold(
      body: TextButtonTheme(
        data: TextButtonThemeData(
          style: TextButton.styleFrom(
            textStyle: headline4,
          ),
        ),
        child: ContainedButtonTheme(
          data: ContainedButtonThemeData(
            style: ContainedButton.styleFrom(
              textStyle: headline4,
            ),
          ),
          child: OutlinedButtonTheme(
            data: OutlinedButtonThemeData(
              style: OutlinedButton.styleFrom(
                textStyle: headline4,
              ),
            ),
            child: Buttons(),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: Home()));
}

This is a prototype, so there isn't any integration with the ThemeData class. When the classes in this repo are part of the Flutter framework, the button themes would be created as part of the app's overall theme. Instead of nesting the three button themes, one could write:

MaterialApp(
  home: Home(),
  theme: ThemeData(
    textButtonTheme: TextButtonTheme(
      data: TextButtonThemeData(
        style: TextButton.styleFrom(
          textStyle: headline4,
        ),
      ),
    ),
    containedButtonTheme: containedButtonTheme(
      data: ContainedButtonThemeData(
        style: ContainedButton.styleFrom(
          textStyle: headline4,
        ),
      ),
    ),
    outlinedButtonTheme: OutlinedButtonTheme(
      data: OutlinedButtonThemeData(
        style: OutlinedButton.styleFrom(
          textStyle: headline4,
        ),
      ),
    ),
  ),
)

About

Prototype implementation of the new design for buttons and button themes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages