flutter - 如何仅从一侧 FLUTTER 使上滑面板城市成为圆形

Question

我是初学者，想制作这样的上滑面板。您的帮助将不胜感激

标签： flutter

Answer 1

我认为这会让你得到你想要的：

import 'package:flutter/material.dart';

    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: _title,
          home: MyStatelessWidget(),
        );
      }
    }
    
    class MyStatelessWidget extends StatelessWidget {
      const MyStatelessWidget({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: 
          Stack(
            children: [
              Center(
                child: Container(
                    height: 300,
                    width: 300,
                    child: Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(50),
                              topLeft: Radius.circular(50))),
                    )),
              ),
              Positioned(
// You can change top and left values based on the layout or device
                top: 140,
                left: 70,
                child: Container(
                  height: 100,
                  width: 100,
                  child: Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(100)),
                      child: Column(
                        children: [
                          SizedBox(
                            height: 20,
                          ),
                          CircleAvatar(
                              radius: 20,
                              backgroundImage: NetworkImage(
                                  'https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg')),
                          Text('Patrick')
                        ],
                      )),
                ),
              ),
            ],
          ),
        );
      }
    }