The Fluent Design is Microsoft’s solution for designing beautiful Windows programs. Flutter has finally expanded support to Windows UWP in Google I/O 2021, which calls for well-designed Windows apps. In this article, I will show you how to create content dialogs, date pickers and time pickers with Flutter.

This guide will work best for Win32 and UWP Flutter apps. If you have not set up your UWP Flutter app yet, follow my other guide to do so.

We will be using the fluent_ui package by bdlukaa, available on pub.dev. If you would like to know how to create a basic Fluent Design app using the fluent_ui package, you may refer to this guide.

Content Dialog

Dialogs are modal UI overlays that provide contextual app information. They block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user.

Example of a content dialog (Source: Microsoft Design)

To display the dialog, we will call the showDialog() function. Set the property context to be your build function’s context, and set the builder property to return a ContentDialog() widget.

showDialog(
  context: context,
  builder: (context) {
    return ContentDialog();
  }
);

Inside the ContentDialog widget, we will be able to specify a few additional properties to customise the appearance of our dialog and its content. For example, the titleproperty should be set to a Text() widget containing your title of the dialog. Similarly, the content property also accepts a Widget, which is usually a Text() widget containing your message. Here is an example of a simple content dialog:

showDialog(
  context: context,
  builder: (context) {
    return ContentDialog(
title: Text("This is a content dialog"),
      content: Text("Dialogs are modal UI overlays that provide contextual app information. They block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user."),
    );
  }
);

The simple content dialog from the code above

The actions property accepts a list of widgets, which should consist of Button() widgets. These widgets appear at the bottom portion of the dialog, and are the actions you would like the user to do after viewing your dialog. For my example, I added a Button() with “OK” as its title to dismiss the dialog. To dismiss a content dialog from its actions, you can simply call Navigator.pop(context). Here is my example of a content dialog with an action.

showDialog(
  context: context,
  builder: (context) {
    return ContentDialog(
      ...
actions: [
        Button(child: Text("OK"), onPressed: (){
          Navigator.pop(context);
        },)
      ],
    );
  }
);

The content dialog with an action from the code above

The styleproperty allows one to customise the appearance and design of the content dialog. It accepts a ContentDialogThemeData(), which has properties to set the style and the padding of the title and body (or content) among many others. For my dialog, I set the titleStyle property to a TextStyle() which set the font size of my title text to 40, the color to black and the weight to Bold.

showDialog(
  context: context,
  builder: (context) {
    return ContentDialog(
        ...
style: ContentDialogThemeData(
            titleStyle: TextStyle(
                fontSize: 40,
                color: Colors.black,
                fontWeight: FontWeight.bold))
);
  }
);

The content dialog with added customisations from the above code

Date Picker

The date picker gives you a standardized way to let users pick a localized date value using touch, mouse, or keyboard input.

Example of a date picker (Source: Microsoft Design)

To create a basic Date Picker, we will first have to constraint the width of the Date Picker. Wrap the DatePicker() widget in a SizedBox() or Container() and set the width to a fixed value. Now we are ready to start customising our DatePicker!

The two required properties of the DatePicker() are selected and onChanged, which is the selected date and the function run when a new date is selected respectively. Therefore, we will need to create a DateTime variable and set it to whatever the current selected date is. I added my variable, called date, to the top of my class and set it to DateTime.now() (the current date) by default.

Then, I set the date variable as the value of the selected property of the DatePicker, and set a function which changes the value of date to the selected date as the onChanged property. Here is how the code looks like:

DateTime date = DateTime.now();
...
SizedBox(
  width: 300,
  child: DatePicker(
    selected: date,
    onChanged: (newdate) {
      setState(() {
        date = newdate;
      });
    },
  )
),

The basic DatePicker from the above codeThe date selection menu shown when the DatePicker is clicked on

Additionally, a function can also be run when the date selection dialog gets closed with no date selected by setting it as the onCancel property.

SizedBox(
  width: 300,
  child: DatePicker(
    ...
onCancel: (){
      print("no date selected");
    },
  )
),

The header property is a String which is shown above the DatePicker. The style of the header can be customised using the headerStyle property.

SizedBox(
  width: 300,
  child: DatePicker(
    ...
header: "Pick a date",
    headerStyle: TextStyle(fontWeight: FontWeight.bold),
  )
),

The DatePicker with a customised header from the code above

The properties showDay, showMonth and showYear accept a boolean which indicates whether the day, month and year should be shown in the DatePicker respectively.

SizedBox(
  width: 300,
  child: DatePicker(
    ...
showYear: false,
  )
),

The DatePicker with the year hidden from the code above

The startYear and endYear properties specify the earliest selectable year and the latest selectable year from the DatePicker. From my experiences, you should set your startYear to one year before the actual starting year because the DatePicker does not display the starting year.

SizedBox(
  width: 300,
  child: DatePicker(
    ...
startYear: 2016,
    endYear: 2022,
  )
),

The date selection menu is now limited to year 2017 to 2022 from the code above

Lastly, the height of the date selection menu can also be specified with the popupHeight property.

SizedBox(
  width: 300,
  child: DatePicker(
    ...
popupHeight: 200,
  )
),

Time Picker

The time picker gives you a standardized way to let users pick a time value using touch, mouse, or keyboard input. This time picker should only be used to let users pick a single time value, and not a range between various times.

Example of a time picker (Source: Microsoft Design)

A Time Picker works very similarly to a Date Picker. Just like a Date Picker, to create a basic Time Picker, we will first have to constraint the width of the Time Picker. Wrap the TimePicker() widget in a SizedBox() or Container() and set the width to a fixed value.

The two required properties of the TimePicker() are also selected and onChanged, which is the selected time and the function run when a new time is selected respectively. I will reuse the date variable from the DatePicker, as both utilise a DateTime variable.

As usual, I set the date variable as the value of the selected property of the TimePicker, and changed the value of date to the selected time in the onChanged property. Here is how the code looks like:

SizedBox(
  width: 300,
  child: TimePicker(
    selected: date,
    onChanged: (newdate) {
      setState(() {
        date = newdate;
      });
    },
  )
),

The basic TimePicker from the above code

Other properties such as header, headerStyle, onCancel, popupHeight and more work similarly to the DatePicker’s properties, so do refer to the DatePicker section of this article to learn more about them!

SizedBox(
  width: 300,
  child: TimePicker(
    ...
header: "Pick a time",
    headerStyle: TextStyle(fontWeight: FontWeight.bold),
  )
),

The TimePicker with a customised header from the code above

There are also some other properties that are specific to the TimePicker, such as the hourPlaceholder, minutePlaceholder, amText, pmText and minuteIncrement. The hourPlaceholder allows for a placeholder for the hour field if no time is selected (or the date variable is null), and the minutePlaceholder allows for a placeholder for the minute field if no time is selected. The amText and pmText properties can be used to override the default AM/PM indicator on the right.

The minuteIncrement parameter allows you to set the increments of the minute section of the time selection dialog which shows up when you click on the TimePicker. By default, it is set to 1.

SizedBox(
  width: 300,
  child: TimePicker(
    ...
minuteIncrement: 5,
  )
),

The time selection dialog with minute increments of 5 minutes from the code above

Conclusion

That’s all for this article and I hope you are now able to create beautiful content dialogs, date and time pickers. If you liked this article, do give it some claps and leave your thoughts in the comments section!

In the next article, I will show you how we can make all sorts of Fluent Design forms, such as TextBoxes, Auto Suggest Boxes and Combo Boxes. See you then!