Flutter implementa a explicação detalhada da janela pop-up de seleção inferior

Flutter percebe a explicação detalhada da janela pop-up de seleção inferior (autoteste IOS)

Use os próprios componentes do flutter:
showModalBottomSheet ()

Sem muita bobagem, basta ir para o código de amostra:

//出现底部弹窗
showModalBottomSheet(
  context: context,
  //自定义底部弹窗布局
  shape: new RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0)),
  ),
  builder: (BuildContext context) {
    //返回内部
    return new Container(
      height: ScreenUtil().setHeight(300),
      child: new Column(
        children: [
          new Container(
            margin: EdgeInsets.only(top: 10.0),
            child: new GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: new Image.asset(
                'images/bottom_arrow .png',
                height: ScreenUtil().setHeight(30.0),
              ),
            ),
          ),
          new Container(
            decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(
                      width: 1.0, color: Colors.black12)),
            ),
            height: ScreenUtil().setHeight(110.0),
            width: ScreenUtil().setWidth(750),
            child: new InkWell(
              onTap: () {
                print('点击了拍照');
                _getCameraImage();
                Navigator.pop(context);
              },
              child: new Center(
                child: new Text(
                  '拍照',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(30.0),
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
          new Container(
            height: ScreenUtil().setHeight(110.0),
            width: ScreenUtil().setWidth(750),
            child: new InkWell(
              onTap: () {
                print('点击了选择照片');
                _getImage();
                Navigator.pop(context);
              },
              child: new Center(
                child: new Text(
                  '选择照片',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(30.0),
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  },
);

Eu também adicionei uma função de selecionar fotos e tirar fotos.
Se você quiser saber mais sobre como selecionar fotos e tirar fotos, verifique meu outro artigo
Explicação detalhada do plug-in Flutter imagem seleção image_picker (oficial)

Desta vez, falaremos principalmente sobre pop-ups:

Uso básico:

showModalBottomSheet(
    context:context,
    build:(BuildContext context){
        return Container(
            child:new Column(
                children:[
                    new Text('第一行'),
                    new Text('第二行'),    
                ]
            ),
        );
    }
);

showModalBottomSheet ()
Contexto de atributos comuns :
forma de contexto : a forma da janela pop-up (traduzida em forma)
build: (BuildContext context) {}: construir layout interno (widget de retorno)

Você pode usar o código acima para obter um efeito pop-up simples.
Como sua construção precisa retornar um widget, você pode personalizar o layout.

Imagem do efeito:

Mais tarde, farei upload desta demonstração para o GitHub, você pode marcar este artigo primeiro

Esta demonstração contém várias pequenas funções, que criei para tornar o projeto mais eficiente no futuro,
então preste mais atenção a ela.

Finalmente, há um ponto muito importante:

Cena: o
que fazer se quiser fechar a janela pop-up ao clicar para selecionar uma foto ou tirar uma foto

Problema: Depois que a
janela for construída, você descobrirá que só pode clicar fora da janela para fechá-la.
Depois de ler o código-fonte, isso não é resolvido.

Solução:
Por fim, pensei que o Navigator
só precisa de uma linha de código para resolver o
Navigator.pop (contexto),
por isso é uma solução perfeita, se você estiver interessado, experimente!

Siga-me e cresça junto!
-As.Kai