flutter - 使用 Positioned inside Stack 无法正常工作

Question

我正在使用具有卡片和定位元素的堆栈，如下图所示。这些定位元素包含按钮。我面临的问题是这些按钮的下部是隐藏的。我也没有给任何额外的保证金。这可能是因为底部导航部分。

图片

这是代码

  Stack(
                  children: <Widget>[
                    Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      child: Padding(
                        padding: EdgeInsets.symmetric(
                            vertical: 40.0, horizontal: 20.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: <Widget>[
                                  Container(
                                    width: size.width * 0.2,
                                    child: StreamBuilder<String>(
                                        stream: bloc.skills,
                                        builder: (context, snapshot) {
                                          return TextField(
                                            onChanged: bloc.changeSkills,
                                            decoration: new InputDecoration(
                                                contentPadding:
                                                    EdgeInsets.symmetric(
                                                        vertical: 0,
                                                        horizontal: 15.0),
                                                border: new OutlineInputBorder(
                                                    borderSide:
                                                        const BorderSide(
                                                            width: 2.0,
                                                            style:
                                                                BorderStyle
                                                                    .solid),
                                                    borderRadius:
                                                        BorderRadius
                                                            .circular(
                                                                50.0)),
                                                focusedBorder:
                                                    OutlineInputBorder(
                                                  borderSide:
                                                      const BorderSide(
                                                          color:
                                                              Colors.grey,
                                                          width: 2.0),
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          50.0),
                                                ),
                                                hintText: 'Skills',
                                                hintStyle: new TextStyle(
                                                    color: Colors.grey,
                                                    fontWeight:
                                                        FontWeight.bold),
                                                errorText: snapshot.error),
                                          );
                                        }),
                                  ),
                                  SizedBox(height: 20.0),
                                  Container(
                                    width: size.width * 0.2,
                                    child: StreamBuilder<String>(
                                        stream: bloc.role,
                                        builder: (context, snapshot) {
                                          return TextField(
                                            onChanged: bloc.changeRole,
                                            decoration: new InputDecoration(
                                                contentPadding:
                                                    EdgeInsets.symmetric(
                                                        vertical: 0,
                                                        horizontal: 15.0),
                                                border: new OutlineInputBorder(
                                                    borderSide:
                                                        const BorderSide(
                                                            width: 2.0,
                                                            style:
                                                                BorderStyle
                                                                    .solid),
                                                    borderRadius:
                                                        BorderRadius
                                                            .circular(
                                                                50.0)),
                                                focusedBorder:
                                                    OutlineInputBorder(
                                                  borderSide:
                                                      const BorderSide(
                                                          color:
                                                              Colors.grey,
                                                          width: 2.0),
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          50.0),
                                                ),
                                                hintText: 'Role',
                                                hintStyle: new TextStyle(
                                                    color: Colors.grey,
                                                    fontWeight:
                                                        FontWeight.bold),
                                                errorText: snapshot.error),
                                          );
                                        }),
                                  ),
                                ],
                              ),
                            ),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Container(
                                    width: size.width * 0.2,
                                    child: StreamBuilder<String>(
                                        stream: bloc.language,
                                        builder: (context, snapshot) {
                                          return TextField(
                                            onChanged: bloc.changeLanguage,
                                            decoration: new InputDecoration(
                                                contentPadding:
                                                    EdgeInsets.symmetric(
                                                        vertical: 0,
                                                        horizontal: 15.0),
                                                border: new OutlineInputBorder(
                                                    borderSide:
                                                        const BorderSide(
                                                            width: 2.0,
                                                            style:
                                                                BorderStyle
                                                                    .solid),
                                                    borderRadius:
                                                        BorderRadius
                                                            .circular(
                                                                50.0)),
                                                focusedBorder:
                                                    OutlineInputBorder(
                                                  borderSide:
                                                      const BorderSide(
                                                          color:
                                                              Colors.grey,
                                                          width: 2.0),
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          50.0),
                                                ),
                                                hintText: 'Language',
                                                hintStyle: new TextStyle(
                                                    color: Colors.grey,
                                                    fontWeight:
                                                        FontWeight.bold),
                                                errorText: snapshot.error),
                                          );
                                        }),
                                  ),
                                  SizedBox(height: 20.0),
                                  Container(
                                    width: size.width * 0.2,
                                    child: StreamBuilder<String>(
                                        stream: bloc.gender,
                                        builder: (context, snapshot) {
                                          return DropdownButtonHideUnderline(
                                            child:
                                                new DropdownButtonFormField<
                                                    String>(
                                              items: <String>[
                                                'Female',
                                                'Male',
                                                'Other'
                                              ].map((String value) {
                                                return new DropdownMenuItem<
                                                    String>(
                                                  value: value,
                                                  child: new Text(value),
                                                );
                                              }).toList(),
                                              onChanged: bloc.changeGender,
                                              decoration:
                                                  new InputDecoration(
                                                      contentPadding:
                                                          EdgeInsets
                                                              .symmetric(
                                                                  vertical:
                                                                      0,
                                                                  horizontal:
                                                                      15.0),
                                                      border: new OutlineInputBorder(
                                                          borderSide:
                                                              const BorderSide(
                                                                  width:
                                                                      2.0,
                                                                  style: BorderStyle
                                                                      .solid),
                                                          borderRadius:
                                                              BorderRadius
                                                                  .circular(
                                                                      50.0)),
                                                      focusedBorder:
                                                          OutlineInputBorder(
                                                        borderSide:
                                                            const BorderSide(
                                                                color: Colors
                                                                    .grey,
                                                                width: 2.0),
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(
                                                                    50.0),
                                                      ),
                                                      hintText: 'Gender',
                                                      hintStyle:
                                                          new TextStyle(
                                                              color: Colors
                                                                  .grey,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .bold),
                                                      errorText:
                                                          snapshot.error),
                                            ),
                                          );
                                        }),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Positioned(
                        left: size.width * 0.02,
                        top: size.height * 0.58 + 2,
                        child: new Container(
                          width: 100.0,
                          height: 40.0,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50.0),
                              color: Colors.white,
                              border: Border.all(
                                  width: 2.0, color: Colors.grey)),
                          child: Align(
                            alignment: Alignment.center,
                            child: new Text(
                              'Back',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        )),
                    Positioned(
                        right: size.width * 0.02,
                        top: size.height * 0.58 + 2,
                        child: new Container(
                          width: 100.0,
                          height: 40.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50.0),
                            color: primaryColor,
                            // border: Border.all(width: 2.0, color: Colors.grey)
                          ),
                          child: Align(
                            alignment: Alignment.center,
                            child: new Text(
                              'Create',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        )),
                  ],
                ),

标签： flutterflutter-layoutflutter-web

Answer 1

添加overflow: Overflow.visible,到Stack