背景が透明なフラッターコーナー半径

90

以下は、背景が透明な丸い角のコンテナをレンダリングすることを期待している私のコードです。 

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"),
                  )

              ),

ただし、これはレンダリングされるものであり、丸い角の半径を持つ白いコンテナ（透明であると予想される）をレンダリングします。何か助けはありますか？

スクリーンショット

dart  flutter 
— ケムジー
ソース

回答:

120

Container背景色を設定した親の内側に丸みを帯びた角で包むColors.transparentと、それがあなたが探していることをしていると思います。Scaffoldデフォルトの背景色を使用している場合、デフォルトの背景色は白です。Colors.transparentそれがあなたが望むものを達成するならば、それをに変えてください。

        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"),
           )
         ),
        ),
— アルバート・ラルディザバル
ソース
1
SliverAppBarで画像を使用する場合、それを行う方法は？
— Md.Abdul HalimRafi19年
1
あなたはSliverFillRemaining（子：aboveCode）を使用することができます
— JenonD
44

背景が透明な角を丸めたい場合は、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"),
    ),
  ),
);
— ダット・グエン
ソース
これは機能します..しかし、私のコンテナの終わりでは、半径osの2乗：imgur.com/a/Qb5kaVW。あなたは私を助けることができますか？
— オーガスト
でも動作しColorFilteredます。BoxDecorationあなたが持っている場合は手抜きをすることができないColorFilterとBlendMode.color。
— ミランヤロシュ
showModalBottomSheetで使用した場合@jayjwが提案のように、あなたはbottomSheetThemeを指定する必要があります
— ヨルゲン・アンデルセン
27

2019年5月1日の時点で、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))
        )
      )
    ),

最近導入された、シートスタイルを制御するためにテーマを使用することは、この問題に最も適しているはずです。

異なるボトムシートに異なるテーマを設定する場合は、適切なサブツリーに新しいThemeオブジェクトを含めて、その領域のボトムシートテーマを上書きします。

何らかの理由で、ボトムシートを起動するときにテーマを手動でオーバーライドしたい場合は、showBottomSheetとshowModalBottomSheetにbackgroundColorパラメーターが追加されました。次のように使用します。

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

テーマを使用すると、アプリ/アプリの現在のテーマに関係なくボトムシートを再利用でき、前述のようにキャンバスの色を設定することによる悪影響はありません。

— jayjw
ソース
これは受け入れられた答えであるはずです...完璧に機能します！
— JohnDetlefs19年
backgroundColor: Colors.transparent,私のために働いた
— tudorprodan
15 
/// 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!"),)
      ),
    );
  }

これを呼び出して、コーナー付きのBotoomSheetを表示します。

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }
— ペドロマサンゴ
ソース
14

それは古い質問です。しかし、この質問に出くわした人のために...

丸みを帯びた角の後ろの白い背景は、実際にはコンテナではありません。それがアプリのキャンバスカラーです。

修正するには：アプリのキャンバスの色をColors.transparentに変更します

例：

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);
— ホルヘ・メンジバー
ソース
いくつかの欠点があります。更新アイコンなど、キャンバスの色に依存する他のオブジェクトも、白ではなく透明な背景になります。
— ホルヘメンジバール
3
これを行うことはお勧めしません。多くのウィジェットはキャンバスの色に依存しているため、それらはすべて個別に設定する必要があります。
— mauriii
ベストアンサー、これがトップアンサーになるはずです。
— AlvinQuezon19年
これを使用すると、すべてcanvasColorのフラッター widgetsがに変わりcolor.transparentます。引き出しを開いてみてください。
— クリミン
最終的に！私の問題を解決しました。
— mbartn
8 
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),
    ),
  ),
);
— Rhys Coombes
ソース
4

モーダルボトムシートには透明な背景色を使用し、ボックスの装飾には別の色を使用します 

   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(),
    );
  });
— アディティアA.ラジャン
ソース
1 
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"),
              )

     

 ),

)

これにより、コンテナの色が背景色と同じになります。そして、同じ高さ-幅の青い色の子コンテナがあります。これにより、コーナーが背景色と同じ色になります。

— Mohit Chachra
ソース
0 
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,
          ),
        )
      );
  }
}
— イグバニイズチュクウ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.