web-dev-qa-db-ja.com

透明な背景を持つフラッターコーナー半径

以下は、透明な背景を持つ角丸コンテナーをレンダリングする予定の私のコードです。

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

              ),

しかし、これがレンダリングするものであり、丸い角の丸みを帯びた白いコンテナ（予想される透明）をレンダリングします。助けがありますか？

screenshot

dartflutter
33
Kemzie

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"),
              )),
        ),
43
Albert Lardizabal

背景を透明にして角を丸くしたい場合、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"),
    ),
  ),
);
13
Dat Nguyen

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

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

修正：アプリのキャンバスの色を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(),
);
8
Jorge Menjívar
/// 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()
    );
  }
5
Pedro Massango

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

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

別のボトムシートのテーマを変更する場合は、適切なサブツリーに新しいテーマオブジェクトを含めて、その領域のボトムシートテーマをオーバーライドします。

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

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

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

4
jayjw