material-components / material-components-flutter

Modular and customizable Material Design UI components for Flutter

Material Components: Shared Documentation and Policies

Material Components for Android, iOS, web and Flutter help developers execute Material Design with modular and customizable UI components. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional user experiences.

This repo contains all common documentation for Material Components projects across the different platforms.

Repos

• Material Components Android
• Material Components iOS
• Material Components Web
• Material Components Flutter

Useful Links

• Contributing
• Filing an Issue
• Components Request Policy
• Code of Conduct
• Stack Overflow (external site)
• Material.io (external site)
• Material Design Guidelines (external site)
• Discord Chat Rooms (external site)

material-components-flutter's Issues

Type scale generator doesn't match with the Design Type scale

• The dart code from the Type scale generator is deprecated and shouldn't be used. It will be awesome to have this properly generated.
  

• I couldn't pick the same font in 'Headlines & Subtitles' and 'Body & Captions'. This only apply for a few fonts in my case I used Oxanium couldn't find it in 'Body & Captions' section .
  

• The Example type scale photo/(sketch file) doesn't match with the scale generator.

Replace deprecated buttons

Not a simple replacement, some styling properties may be better in a theme (e.g. TextButtonTheme), others specified per component (e.g. TextButtonStyle.from()).

See https://flutter.dev/docs/release/breaking-changes/buttons

Outlined Icons Stroke Width

Salam, Hello World!

Want to customize stroke width of outlined icons. Couldn't find an easy plugged in way.

Icon Button Splash overflow

According to this flutter issue, the IconButton's default splashRadius is too large even for material's AppBar. As mentioned in the issue, the splash overflows and has to be set manually.

Was this intended? As the splash doesn't even fit in the default material AppBar.

Embed Dartpads and remove static code

Large pieces of code are currently duplicated in markdown and .dart files

• Code should only exist in .dart files,
  • this enables type-checking, code editing, interactive use; all obvious benefits over static markdown
  • exception to this are small code samples
• Dartpads should be fully embedded in the dev docs

Simplify Shrine theming

The dev docs have a bunch of slightly different Shrine theme implementations, which are also suboptimal due to changes in the theming system.

Write a single canonical Shrine theme and use it everywhere. (if Dartpad supported pub packages dart-lang/dart-pad#901, defining it once through one would ideal)

This should be somewhat easier after theming code is removed from .md files (#103)

Input design on forms doesn't accomodate coloured backgrounds

Example code:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Styling Demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.lightGreen,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                fillColor: Colors.white,
                filled: true,
                labelText: 'Enter your username',
                hintText: 'Enter a search term',
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
            child: TextFormField(
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                labelText: 'Enter your username',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

The instructions on the documentation is unclear as there is no Text() widget to set TextHeightBehavior on so then I end up with making do with a super large input component which has super weird spacing for the text being inputted.

Widget _emailField() {
    return StreamBuilder<bool>(
      stream: _loginController.isEmailValid,
      builder: (context, snapshot) {
        return TextField(
          onChanged: _loginController.onEmailChanged,
          keyboardType: TextInputType.emailAddress,
          style: const TextStyle(
            height: 1.8,
            leadingDistribution: TextLeadingDistribution.proportional,
          ),
          decoration: const InputDecoration(
            border: OutlineInputBorder(
              borderSide: BorderSide.none,
            ),
            labelText: "Email Address",
            labelStyle: TextStyle(
              color: ColorUtils.blue,
            ),
            floatingLabelStyle: TextStyle(
              color: ColorUtils.blue,
              height: 4,
              leadingDistribution: TextLeadingDistribution.proportional,
            ),
          ),
        );
      },
    );
  }

Type scale generator uses wrong caption

The dart code for the Type scale generator should use right caption for these fonts.

Wrong:
GoogleFonts.iBMPlexSans()

Correct:
GoogleFonts.ibmPlexSans()

Same for all:

Alegreya Sans SC
Alegreya SC
Almendra SC
Carrois Gothic SC
Cormorant SC
DM Mono
DM Sans
DM Serif Display
DM Serif Text
EB Garamond
Holtwood One SC
IBM Plex Mono
IBM Plex Sans
IBM Plex Sans Condensed
IBM Plex Serif
IM Fell Double Pica
IM Fell Double Pica SC
IM Fell DW Pica
IM Fell DW Pica SC
IM Fell English
IM Fell English SC
IM Fell French Canon
IM Fell French Canon SC
IM Fell Great Primer
IM Fell Great Primer SC
Marcellus SC
Mate SC

NTR
Old Standard TT
Playfair Display SC
PT Mono
PT Sans
PT Sans Caption
PT Sans Narrow
PT Serif
PT Serif Caption
Spectral SC
Vollkorn SC
ZCOOL XiaoWei

Funny fact:
ABeeZee works great.
ABeeZee -> aBeeZee

[Dev Docs] Update nav drawer example to use ColorScheme.primary

blocked by flutter/flutter#67921

where are sample codes ?

Hello.

I don't find sample codes for material components on your website.
Could you tell me where i could find them please ?

Thanks.

Link in CONTRIBUTING is not clickable

Renaming CONTRIBUTING to CONTRIBUTING.md will do the work.

[Web] `ListTile` `title` shift to the right on rebuild.

Steps to reproduce

1. Create a new Flutter project (increment template).
2. Add a ListTile into the Column in MyHomePage:

ListTile(
  leading: Icon(Icons.warning),
  title: Text("This text moves to the right when the mouse enters the display on web."),
),

3. Once the page has loaded, move the mouse onto the page.

Observed behaviour (bug)

The text will shift slightly to the right.

Expected behaviour

The text does not move.

Additional information

1. I initially observed this behaviour when a ListTile was included in a dialog. The shift occurred on the first click within the dialog rather than on the mouseover.
2. If visualDensity: VisualDensity.standard, is set then the issue no longer occurs.

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.18363.1316], locale en-ZA)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] Connected device (3 available)

! Doctor found issues in 1 category.

Looking forward to some feedback on this.

Thanks.