颤振：如何使透明

Posted 2023-02-23

【中文标题】颤振：如何使透明

【英文标题】：flutter : how to make transparent

【发布时间】：2022-01-23 01:49:49

【问题描述】：

我圈出来的怎么让它透明。

Scaffold(

      appBar: AppBar(
        title: Text("Add New Address",
            style: TextStyle(
                fontSize: t1Size,
                fontWeight: FontWeight.w700,
                color: Colors.white)),
      ),
      bottomNavigationBar: saveButton(context),
      backgroundColor: Colors.white.withOpacity(0.9),
      body: Container(
        child: Column(
          // alignment: Alignment.topCenter,
          children: [
            Expanded(
              child: MapPicker(
                // pass icon widget
                iconWidget: Icon(
                  Icons.location_on,
                  size: 40,
                  color: appGreenColor,
                ),
       
                //add map picker controller
                mapPickerController: mapPickerController,
                child: GoogleMap(
                  myLocationEnabled: true,
                  zoomControlsEnabled: false,
                  // hide location button
                  myLocationButtonEnabled: true,
                  mapType: MapType.normal,
                  indoorViewEnabled: false,
                  //  camera position
                  initialCameraPosition: cameraPosition,
                  onMapCreated: (GoogleMapController controller) 
                    _controller.complete(controller);
                  ,
                  onCameraMoveStarted: () 
                    // notify map is moving
                    mapPickerController.mapMoving!();
                    textController.text = "checking ...";
                  ,
                  onCameraMove: (cameraPosition) 
                    this.cameraPosition = cameraPosition;
                  ,
                  onCameraIdle: () async 
                    // notify map stopped moving
                    mapPickerController.mapFinishedMoving!();
                    //get address name from camera position
                    List<Placemark> placemarks = await placemarkFromCoordinates(
                      cameraPosition.target.latitude,
                      cameraPosition.target.longitude,
                    );
                    fLocationName = placemarks.first.name;
                    setState(() 
                      fLocationName;
                    );
                    // update the ui with the address
                    textController.text =
                        '$placemarks.first.name ,$placemarks.first.subLocality, $placemarks.first.locality, $placemarks.first.administrativeArea, $placemarks.first.country';
                  ,
                ),
              ),
            ),
     
            Container(
              // height: MediaQuery.of(context).size.height - 400,
              clipBehavior: Clip.hardEdge,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30))),
              child: SingleChildScrollView(
                child: Column(children: [
                  SizedBox(
                    height: 25,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          "Select Your Location",
                          style: TextStyle(
                            fontSize: t2Size,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 20.0),
                        child: Row(
                          children: [
                            Icon(
                              Icons.location_on_outlined,
                              color: appYellowColor,
                              size: 20,
                            ),
                            SizedBox(
                              width: 6,
                            ),
                            Text(
                              fLocationName == null ? "" : '$fLocationName',
                              style: TextStyle(
                                color: appYellowColor,
                                fontSize: t3Size,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Container(
                        padding: const EdgeInsets.only(left: 46.0, right: 20),
                        child: Text(
                          '$textController.text',
                          style: TextStyle(
                            color: extraLightColor,
                            fontSize: t4Size,
                            fontWeight: FontWeight.w500,
                          ),
                          textAlign: TextAlign.start,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Column(
                        children: [
                          SizedBox(
                            height: 15,
                          ),
                          Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 15.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Text(
                                  "Save This Address As",
                                  style: TextStyle(
                                    fontSize: t2Size,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 15.0),
                            child: Row(
                              children: [
                                Container(
                                  width: MediaQuery.of(context).size.width - 30,
                                  decoration: BoxDecoration(
                                    color: extraLightColor.withOpacity(0.1),
                                    borderRadius: BorderRadius.circular(4),
                                    //color: Colors.white,
                                  ),
                                  padding: const EdgeInsets.only(left: 12.0),
                                  child: Center(
                                    child: TextFormField(
                                      controller: _saveAddressAsController,
                                      autocorrect: false,
                                      style: TextStyle(
                                          color: apptitleColor,
                                          fontWeight: FontWeight.w400,
                                          fontSize: t4Size),
                                      decoration: InputDecoration(
                                        border: UnderlineInputBorder(
                                            borderSide: BorderSide.none),

                                        hintText: "Home/ Work/ Other",
                                        prefixIconConstraints: BoxConstraints(
                                          minWidth: 16,
                                          minHeight: 16,
                                        ),
                                        //isDense: true,
                                      ),
                                      //controller: _controller1,
                                      maxLines: 1,
                                      // onChanged: searchSalon,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),

                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 15.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Text(
                                  "Search Location",
                                  style: TextStyle(
                                    fontSize: t2Size,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),

                              ],
                            ),
                          ),
                          SizedBox(
                            height: 15.0,
                          ),
                          Padding(
                            padding: EdgeInsets.symmetric(horizontal: 15),
                            child: searchBar(context),
                          ),

                        ],
                      )
                    ],
                  ),
                ]),
              ),
            )
          ],
        ),
      ),
    );

【参考方案1】：

用 ClipRRect 包裹你的容器

ClipRRect(
  borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30),
                  topRight: Radius.circular(30)),
  child:Container() 
)

【讨论】：

不，它不工作

【参考方案2】：

该颜色来自Scaffold 的backgroundColor。对于这种布局，Stack 比Column 更适合。同样在您的 sn-p 中，您可以使用Transform 来做一个技巧。但是对于点击事件，您可能会发现一些麻烦。为此，请使用 Container's transform 作为第二个 Container，即持有第二部分。

Container(
   transform: Matrix4.translationValues(0, -30, 0),//-30=y based on your need

【参考方案3】：

你可以试试这个建议

*第一；

您可以使用>> Stack 小部件像层一样运行（也许您知道 Photoshop 等）

Stack( children: <Widget>[
//Container(), this show bottom
// Column(),
// google map 
//TextField(),  this show top 
// any widget..
]),

*其次;

Scaffold(
 backgroundColor: Colors.transparent, //maybe it work
);