The RequestFavorPage widget is also stateless right now as we care only about its layout currently:

class RequestFavorPage extends statelessWidget {
  final List<Friend> friends;

  RequestFavorPage({Key key, this.friends}) : super(key: key);

  @override
  Widget build(BuildContext context) {...} // for brevety
}

As you can see, the only thing in the widget description is the friends list, which must be provided by the parent widget as this is a statelessWidget instance right now.

The build() method of the widget begins as follows:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Requesting a favor"),
        leading: CloseButton(),
        actions: <Widget>[
          FlatButton(
              child: Text("SAVE"), textColor: Colors.white, onPressed: () 
              {}),
        ],
      ),
     body: ... // continues below
 ...

appBar here contains two new properties:

• The leading property, which is a widget displayed before the title. In this case, we use a CloseButton widget that is a button integrated with the material Navigator widget (more on that in Chapter 7, Routing: Navigating between Screens). 
• The actions property, which receives a list of widgets to display after the title; in this case, we display a FlatButton instance using which we will save the favor request.

The body of Scaffold defines the layout in a Column widget. It contains two new properties: the first is mainAxisSize, which defines the size in the vertical axis; here we use MainAxisSize.min so it only takes up as much space as is necessary. The second is crossAxisAlignment, which defines where to align the children in the horizontal axis. By default, Column aligns its children horizontally in the center. Using this property, we may change this behavior. There are three child widgets in Column that will take the user input:

• A DropdownButtonFormField widget that lists the DropdownMenuItem widget items in a popup when pressed:

...
  DropdownButtonFormField(
    items: friends
        .map(
          (f) => DropdownMenuItem(
                child: Text(f.name),
              ),
        )
        .toList(),
  ),
... 

Here, we use the map() method from the Dart Iterable type, where each element from the list (friends, in this case) is mapped to a new DropdownMenuItem widget. So, each element from the friends list will be displayed as a widget item in the drop-down list.

• A TextFormField widget that allows the input of text by typing on the keyboard:

  TextFormField(
    maxLines: 5,
    inputFormatters: [LengthLimitingTextInputFormatter(200)],
  ),

The TextFormField widget allows text input. By adding inputFormatters to it, we can configure how it looks on the screen. Here we just limit the total length of the typed text to 200 characters by using the LengthLimitingTextInputFormatter class, which is provided by the flutter/services library.

• A DateTimePickerFormField widget that allows the user to select a DateTime instance and maps it to a DateTime Dart type:

  DateTimePickerFormField(
    inputType: InputType.both,
    format: DateFormat("EEEE, MMMM d, yyyy 'at' h:mma"),
    editable: false,
    decoration: InputDecoration(
        labelText: 'Date/Time', hasFloatingPlaceholder: false),
    onChanged: (dt) {},
  ),

The DateTimePickerFormField widget is not a built-in widget from Flutter. This is a third-party plugin from the datetime_picker_formfield library. Here, we define some properties to change how it appears:

• inputType: Whether to select date, time, or both.
• format: A DateFormat Dart type to define the string representation format of the value.
• editable: Whether the widget is to be manually editable by the user.
• decoration: Used to define a decoration for the input field in a Material Design way. Note that we have not defined it for other input fields.
• onChanged: Callback called with the new value selected by the user.

Besides the input fields, there are also some Container and Text widgets in the Column to help in the formatting and design of the screen. Take a look at the chapter source code for the full layout code.