Dưới đây là mã của tôi mà tôi mong đợi sẽ hiển thị một vùng chứa góc tròn với nền trong suốt.

return new Container(
                //padding: const EdgeInsets.all(32.0),
                height: 800.0,
                //color: const Color(0xffDC1C17),
                //color: const Color(0xffFFAB91),
                decoration: new BoxDecoration(
                  color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
                  borderRadius: new BorderRadius.only(
                    topLeft:  const  Radius.circular(40.0),
                    topRight: const  Radius.circular(40.0))
                ),
                child:  new Container(
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        borderRadius: new BorderRadius.only(
                            topLeft:  const  Radius.circular(40.0),
                            topRight: const  Radius.circular(40.0))
                    ),
                  child: new Center(
                    child: new Text("Hi modal sheet"),
                  )

              ),

Tuy nhiên, đây là những gì nó hiển thị, nó hiển thị một vùng chứa màu trắng (dự kiến ​​trong suốt) với bán kính góc tròn. Bất kỳ giúp đỡ?

Nếu bạn bọc của bạn Containervới các góc tròn bên trong của cha mẹ với màu nền được đặt thành, Colors.transparenttôi nghĩ đó là điều bạn đang tìm kiếm. Nếu bạn đang sử dụng Scaffoldmàu nền mặc định là màu trắng. Thay đổi điều đó thành Colors.transparentnếu điều đó đạt được những gì bạn muốn.

        new Container(
          height: 300.0,
          color: Colors.transparent,
          child: new Container(
            decoration: new BoxDecoration(
              color: Colors.green,
              borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0),
              )
            ),
            child: new Center(
            child: new Text("Hi modal sheet"),
           )
         ),
        ),

Nếu bạn muốn làm tròn các góc với nền trong suốt, cách tốt nhất là sử dụng ClipRRect.

return ClipRRect(
  borderRadius: BorderRadius.circular(40.0),
  child: Container(
    height: 800.0,
    width: double.infinity,
    color: Colors.blue,
    child: Center(
      child: new Text("Hi modal sheet"),
    ),
  ),
);

Kể từ ngày 1 tháng 5 năm 2019, hãy sử dụng BottomSheetTheme .

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

Được giới thiệu gần đây, sử dụng một chủ đề để kiểm soát kiểu trang tính sẽ là cách tốt nhất cho vấn đề này.

Nếu bạn muốn đặt chủ đề cho các trang dưới cùng khác nhau, hãy đưa một đối tượng Chủ đề mới vào cây con thích hợp để ghi đè chủ đề trang dưới cùng chỉ dành cho khu vực đó.

Nếu vì lý do nào đó, bạn vẫn muốn ghi đè chủ đề theo cách thủ công khi khởi chạy trang tính dưới cùng, showBottomSheet và showModalBottomSheet hiện có thông số backgroundColor . Sử dụng nó như thế này:

 showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (c) {return NavSheet();},
  );

Sử dụng chủ đề cho phép sử dụng lại các trang dưới cùng bất kể chủ đề hiện tại của ứng dụng / ứng dụng là gì và không có tác dụng phụ tiêu cực nào khi đặt màu canvas như đã đề cập.

/// Create the bottom sheet UI
  Widget bottomSheetBuilder(){
    return Container(
      color: Color(0xFF737373), // This line set the transparent background
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular( 16.0)
            )
        ),
        child: Center( child: Text("Hi everyone!"),)
      ),
    );
  }

Gọi điều này để hiển thị BotoomSheet với các góc:

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }

Đó là một câu hỏi cũ. Nhưng đối với những người gặp câu hỏi này ...

Nền trắng đằng sau các góc tròn không thực sự là vùng chứa. Đó là màu canvas của ứng dụng.

ĐỂ SỬA: Thay đổi màu canvas của ứng dụng thành Colors.transparent

Thí dụ:

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);

Scaffold(
  appBar: AppBar(
    title: Text('BMI CALCULATOR'),
  ),
  body: Container(
    height: 200,
    width: 170,
    margin: EdgeInsets.all(15),
    decoration: BoxDecoration(
      color: Color(
        0xFF1D1E33,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
  ),
);

Sử dụng màu nền trong suốt cho modalbottomsheet và cung cấp màu riêng biệt cho trang trí hộp

   showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context, builder: (context) {
    return Container(

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft:Radius.circular(40) ,
            topRight: Radius.circular(40)
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 20,horizontal: 60),
      child: Settings_Form(),
    );
  });

Ba gói liên quan để giải quyết vấn đề này với nhiều tùy chọn nâng cao là:

• slide_up_panel
• modal_bottom_sheet
• slide_panel

class MyApp2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          elevation: 0,
          color: Colors.blueAccent,
        )
      ),
      title: 'Welcome to flutter ',
      home: HomePage()
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int number = 0;
  void _increment(){
   setState(() {
      number ++;
   });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueAccent,
        appBar: AppBar(
          title: Text('MyApp2'), 
          leading: Icon(Icons.menu),
          // backgroundColor: Colors.blueAccent,

          ),
        body: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(200.0),
              topRight: Radius.circular(200)
            ), 
            color: Colors.white,
          ),
        )
      );
  }
}

showModalBottomSheet(
   context: context,
   builder: (context) => Container(
            color: Color(0xff757575), //background color 
            child:  new Container(
                decoration: new BoxDecoration(
                    color: Colors.blue,
                    borderRadius: new BorderRadius.only(
                        topLeft:  const  Radius.circular(40.0),
                        topRight: const  Radius.circular(40.0))
                ),
              child: new Center(
                child: new Text("Hi modal sheet"),
              )

     

 ),

)

Điều này sẽ làm cho màu vùng chứa của bạn giống với màu nền. Và sẽ có một container con có cùng chiều cao và chiều rộng với màu xanh lam. Điều này sẽ làm cho góc có cùng màu với màu nền.