one_ui 0.3.0

Flutter widgets implementing Samsung One UI. Based on the official documentation.

one_ui

Unofficial implementation of Samsung One UI for Flutter.

Resources

• Samsung Developers | One UI Design Guidelines
• Samsung Design | One UI Design Guidelines

Widgets

Bottom Navigation Bar

An One UI style bottom navigation bar.

• Example

Scaffold(
  bottomNavigationBar: OneUIBottomNavigationBar(
    currentIndex: _index,
    onTap: (value) {
      setState(() {
        _index = value;
      });
    },
  ),
)

Buttons

Buttons allow users to take actions, and make choices, with a single tap. Learn more

Back Button

One UI Icon Button with back icon.

• Example

OneUIBackButton()

Contained Button

An One UI style Elevated Button.

• Example

OneUIContainedButton(
  onPressed: () {},
  child: Text("Contained button"),
)

Flat Button

An One UI style Text Button.

• Example

OneUIFlatButton(
  onPressed: () {},
  child: Text("Flat button"),
)

Icon Button

An One UI style Icon Button.

• Example

OneUIIconButton(
  onPressed: () {},
  icon: Icon(Icons.home),
)

Dialog

An One UI style Alert Dialog.

• Example

ListTile(
  title: Text("Show dialog"),
  onTap: () {
    showOneUIDialog(
      context: context,
      builder: (context) {
        return OneUIAlertDialog(
          title: Text("title"),
          content: Text("This is a demo alert dialog."),
          actions: [
            OneUIDialogAction(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("Cancel"),
            ),
            OneUIDialogAction(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("Accept")
            ),
          ],
        );
      },
    );
  },
)

Popup Menu

An One UI style Popup Menu Button.

• Example

OneUIPopupMenuButton(
  itemBuilder: (context) => <PopupMenuEntry>[
    const OneUIPopupMenuItem(child: Text('Option 1')),
    const OneUIPopupMenuItem(child: Text('Option 2')),
    const OneUIPopupMenuItem(child: Text('Option 3')),
  ],
),

Switch

An One UI Style Switch.

• Example

OneUISwitch(
  value: _value,
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
)

Slider

An One UI Style Slider.

• Example

OneUISlider(
  value: _value,
  onChanged: (value)
)

View

An One UI Style scroll view.

• Example

@override
Widget build(BuildContext context) {
  return OneUIView(
    title: Text("Title"),
    actions: [
      OneUIPopupMenuButton(
        itemBuilder: (context) => <PopupMenuEntry>[
          const OneUIPopupMenuItem(child: Text('Option 1')),
          const OneUIPopupMenuItem(child: Text('Option 2')),
          const OneUIPopupMenuItem(child: Text('Option 3')),
        ],
      ),
    ],
    child: body,
  );
}

Thanks to

one_ui_scroll_view by jja08111