투명한 배경의 플러터 코너 반경

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 
— Kemzie
소스

답변:

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 Halim Rafi
1
SliverFillRemaining (child : 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 제곱 : imgur.com/a/Qb5kaVW . 도와 주실 수 있나요?
— Augusto
으로도 작동 ColorFiltered. 은 BoxDecoration당신이있는 경우에 모서리를 잘라 실패 ColorFilter와 함께 BlendMode.color.
— Milan Jaros
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))
        )
      )
    ),

최근에 도입 된 테마를 사용하여 시트 스타일을 제어하는 ​​것이이 문제에 가장 적합합니다.

다른 하단 시트의 테마를 다르게 지정하려면 해당 하위 트리에 새 테마 개체를 포함하여 해당 영역에 대한 하단 시트 테마를 재정의합니다.

어떤 이유로 인해 하단 시트를 시작할 때 수동으로 테마를 재정의하려는 경우 이제 showBottomSheet 및 showModalBottomSheet 에 backgroundColor 매개 변수가 있습니다. 다음과 같이 사용하십시오.

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

테마를 사용하면 앱 / 앱의 현재 테마에 관계없이 하단 시트를 재사용 할 수 있으며, 언급 한대로 캔버스 색상을 설정하는 데 따른 부작용이 없습니다.

— Jayjw
소스
이것은 받아 들여진 대답이어야합니다 ... 완벽하게 작동합니다!
— John Detlefs
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(),
);
— 호르헤 멘지 바르
소스
몇 가지 단점이 있습니다. 새로 고침 아이콘과 같이 캔버스 색상에 의존하는 다른 개체도 흰색 대신 투명한 배경을 갖습니다.
— Jorge Menjivar 2019
3
나는 이것을 권장하지 않습니다. 많은 위젯은 캔버스 색상에 의존하므로 모두 개별적으로 설정해야합니다.
— mauriii
최고의 답변, 이것이 최고의 답변이어야합니다.
— Alvin Quezon
이것을 사용하면, 모두 canvasColor의 떨림이 widgets 변경됩니다 color.transparentu는 무엇을보고, 오픈 서랍을 시도하십시오!
— Crimin
드디어! 내 문제를 해결했습니다.
— 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(),
    );
  });
— Aditya A. Rajan
소스
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"),
              )

     

 ),

)

이렇게하면 컨테이너 색상이 배경색과 동일하게됩니다. 그리고 파란색과 같은 높이 너비의 자식 컨테이너가 있습니다. 이렇게하면 모서리가 배경색과 같은 색상으로 만들어집니다.

— 모 히트 차크라
소스
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.