如何使用 flutter 设计带有边框的阴影，如下图所示？

Question

我如何使用 flutter 设计 UI 如下图所示，

Answer 1

设计页面

import 'package:flutter/material.dart';
import 'package:shaon_project/themes/light_color.dart';

import '../wigets/apply_form.dart';

class ApplyNewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [LightColor.docBackStart, LightColor.docBackEnd])),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: const Text('Apply New'),
        ),
        body: Center(
          child: Container(
            height: 430,
            width: 310,
            child: Stack(
              children: [
                Positioned(
                  top: 20,
                  left: 10,
                  child: SizedBox(
                    height: 410,
                    width: 300,
                    child: Card(
                      color: LightColor.cardBottomColor,
                      elevation: 20,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50),
                        side: BorderSide(color: Colors.white, width: 3),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 420,
                  width: 300,
                  child: Card(
                    color: Colors.white,
                    elevation: 20,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                      side: BorderSide(color: Colors.white, width: 3),
                    ),
                    child: ApplyForm(),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

表单页面：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ApplyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      children: \[
        TextFormField(
          decoration: const InputDecoration(
            border: UnderlineInputBorder(),
            labelText: 'University Name',
          ),
        ),
        SizedBox(
          height: 10,
        ),
        TextFormField(
          decoration: const InputDecoration(
            border: UnderlineInputBorder(),
            labelText: 'Course Type',
          ),
        ),
        SizedBox(
          height: 10,
        ),
        TextFormField(
          decoration: const InputDecoration(
            border: UnderlineInputBorder(),
            labelText: 'Course Module',
          ),
        ),
        SizedBox(
          height: 10,
        ),
        TextFormField(
          decoration: const InputDecoration(
            border: UnderlineInputBorder(),
            labelText: 'Your IELTS Score',
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: RichText(
              text: const TextSpan(
                text: 'Status: ',
                style: TextStyle(fontWeight: FontWeight.bold),
                children: <TextSpan>\[
                  TextSpan(
                      text: 'Eligible',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.teal)),
                \],
              ),
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Column(
          children: \[
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.red, // background
                onPrimary: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
              ), // foreground

              onPressed: () {},
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: Text(
                  'Apply',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            )
          \],
        )
      \],
    );
  }
}

如何使用 flutter 设计带有边框的阴影，如下图所示？

How to design shadow with border look like below image using flutter?

flutter

flutter-layout