Flutter layout fixed bottom container and top container with bottom rounded corners

Question

I am trying to achieve a similar look to the attached screenshot but I am having trouble working out how to position the element at the bottom, and working out how to wrap the top element so I can place in the rounded corners.

return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        elevation: 0,
      ),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Text('How was the experience?',
                    style: Theme.of(context).textTheme.headline5.copyWith(
                        color: Theme.of(context).colorScheme.onSurface))),
            const SizedBox(height: 20),
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Text(
                    'Share your experience so next {name} can serve you better.',
                    style: Theme.of(context).textTheme.bodyText1)),
            SizedBox(
                height: 100,
                child: ListView(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  children: [
                    _buildRating('Very Dissatisfied', Colors.red,
                        Icons.sentiment_very_dissatisfied),
                    _buildRating('Dissatisfied', Colors.amber,
                        Icons.sentiment_dissatisfied),
                    _buildRating(
                        'Neutral', Colors.blue, Icons.sentiment_neutral),
                    _buildRating('Satisfied', Colors.lightGreen,
                        Icons.sentiment_satisfied),
                    _buildRating('Very Ssatisfied', Colors.green,
                        Icons.sentiment_very_satisfied),
                  ],
                )),
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Text('Additional Feedback',
                    style: Theme.of(context).textTheme.bodyText1)),
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: TextFormField(
                  expands: false,
                  minLines: null,
                  maxLines: 5,
                  // controller: _descController,
                  textInputAction: TextInputAction.next,
                  textCapitalization: TextCapitalization.sentences,
                  // maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: const InputDecoration(
                      alignLabelWithHint: true,
                      hintText: 'Write your feedback'),
                  validator: (desc) => desc.length < 25
                      ? 'Must be at least 25 characters'
                      : null,
                  // onChanged: (desc) => _desc = desc,
                )),
            Container(
                color: Colors.grey[300],
                child: Positioned(
                    bottom: 0,
                    child: Row(
                      children: [
                        Column(children: [Text("Post your experience!")]),
                        Column(children: [Text("OK")])
                      ],
                    )))
          ],
        ),
      ),
    );

Answer 1

return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        elevation: 0,
      ),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.spaceEvenly,
          children: [
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Text('How was the experience?',
                    style: Theme.of(context).textTheme.headline5.copyWith(
                        color: Theme.of(context).colorScheme.onSurface))),
            const SizedBox(height: 20),
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Text(
                    'Share your experience so next {name} can serve you better.',
                    style: Theme.of(context).textTheme.bodyText1)),
            SizedBox(
                height: 100,
                child: ListView(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  children: [
                    _buildRating('Very Dissatisfied', Colors.red,
                        Icons.sentiment_very_dissatisfied),
                    _buildRating('Dissatisfied', Colors.amber,
                        Icons.sentiment_dissatisfied),
                    _buildRating(
                        'Neutral', Colors.blue, Icons.sentiment_neutral),
                    _buildRating('Satisfied', Colors.lightGreen,
                        Icons.sentiment_satisfied),
                    _buildRating('Very Ssatisfied', Colors.green,
                        Icons.sentiment_very_satisfied),
                  ],
                )),
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Text('Additional Feedback',
                    style: Theme.of(context).textTheme.bodyText1)),
            Padding(
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: TextFormField(
                  expands: false,
                  minLines: null,
                  maxLines: 5,
                  // controller: _descController,
                  textInputAction: TextInputAction.next,
                  textCapitalization: TextCapitalization.sentences,
                  // maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: const InputDecoration(
                      alignLabelWithHint: true,
                      hintText: 'Write your feedback'),
                  validator: (desc) => desc.length < 25
                      ? 'Must be at least 25 characters'
                      : null,
                  // onChanged: (desc) => _desc = desc,
                )),
            Container(
                color: Colors.grey[300],
                child: Positioned(
                    bottom: 0,
                    child: Row(
                      children: [
                        Column(children: [Text("Post your experience!")]),
                        Column(children: [Text("OK")])
                      ],
                    )))
          ],
        ),
      ),
    );

use the spaceEvenly or spaceBetween inside the Column property