Alert Dialog mit Abgerundeten Ecken flattern

Ich versuche, erstellen Sie einen alert-dialog mit abgerundeten Ecken Flattern, wie unten screenshot. fügen Sie auch meinen code hier, aber meine Ausgabe ist genau das, unterscheidet sich von dem erwarteten. irgendjemand, bitte helft mir.

Erwartet Warnmeldung

Alert Dialog mit Abgerundeten Ecken flattern

mein code ist hier.

void _showAlert() {
AlertDialog dialog = new AlertDialog(
  content: new Container(
    width: 260.0,
    height: 230.0,
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: const Color(0xFFFFFF),
      borderRadius: new BorderRadius.all(new Radius.circular(32.0)),
    ),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        //dialog top
        new Expanded(
          child: new Row(
            children: <Widget>[
              new Container(
                //padding: new EdgeInsets.all(10.0),
                decoration: new BoxDecoration(
                  color: Colors.white,
                ),
                child: new Text(
                  'Rate',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                    fontFamily: 'helvetica_neue_light',
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),

        //dialog centre
        new Expanded(
          child: new Container(
              child: new TextField(
            decoration: new InputDecoration(
              border: InputBorder.none,
              filled: false,
              contentPadding: new EdgeInsets.only(
                  left: 10.0, top: 10.0, bottom: 10.0, right: 10.0),
              hintText: ' add review',
              hintStyle: new TextStyle(
                color: Colors.grey.shade500,
                fontSize: 12.0,
                fontFamily: 'helvetica_neue_light',
              ),
            ),
          )),
          flex: 2,
        ),

        //dialog bottom
        new Expanded(
          child: new Container(
            padding: new EdgeInsets.all(16.0),
            decoration: new BoxDecoration(
              color: const Color(0xFF33b17c),
            ),
            child: new Text(
              'Rate product',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18.0,
                fontFamily: 'helvetica_neue_light',
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ],
    ),
  ),
);

showDialog(context: context, child: dialog);
}
}

Die Ausgabe, die ich von den oben genannten code ist.

Alert Dialog mit Abgerundeten Ecken flattern

  • ich weiß nicht warum, aber das Ergebnis hat mich zum lachen so schwer
InformationsquelleAutor Rosemary | 2018-06-21
  1. 23

    Den container, wo Sie die BoxDecoration ist im widget-Baum, unter dem alert-Dialogfeld. Was bedeutet, dass Sie sind Einstellung nur eine box, in die Polsterung Ihres Dialogs. Müssen Sie erstellen eine benutzerdefinierte AlertDialog/showDialog und legen Sie den Umkreis dort. In der benutzerdefinierten widget, das Sie auch die Schaltfläche Hinzugefügt und alles, wo Sie brauchen, um die Arbeit darüber hinaus, dass die Polsterung.

    Wenn man die customShowDialog.dart-Datei in Ihr Projekt (gist.github.com) wo können Sie den radius hier borderRadius: BorderRadius.all(Radius.circular(20.0)) - und nennen es wie folgt:

    return new CustomAlertDialog(
    content: new Container(
        width: 260.0,
        height: 230.0,
        decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        color: const Color(0xFFFFFF),
        borderRadius:
            new BorderRadius.all(new Radius.circular(32.0)),
        ),
        child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
            //dialog top
            new Expanded(
            child: new Row(
                children: <Widget>[
                new Container(
                    //padding: new EdgeInsets.all(10.0),
                    decoration: new BoxDecoration(
                    color: Colors.white,
                    ),
                    child: new Text(
                    'Rate',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18.0,
                        fontFamily: 'helvetica_neue_light',
                    ),
                    textAlign: TextAlign.center,
                    ),
                ),
                ],
            ),
            ),

            //dialog centre
            new Expanded(
            child: new Container(
                child: new TextField(
                decoration: new InputDecoration(
                border: InputBorder.none,
                filled: false,
                contentPadding: new EdgeInsets.only(
                    left: 10.0,
                    top: 10.0,
                    bottom: 10.0,
                    right: 10.0),
                hintText: ' add review',
                hintStyle: new TextStyle(
                    color: Colors.grey.shade500,
                    fontSize: 12.0,
                    fontFamily: 'helvetica_neue_light',
                ),
                ),
            )),
            flex: 2,
            ),

            //dialog bottom
            new Expanded(
            child: new Container(
                padding: new EdgeInsets.all(16.0),
                decoration: new BoxDecoration(
                color: const Color(0xFF33b17c),
                ),
                child: new Text(
                'Rate product',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontFamily: 'helvetica_neue_light',
                ),
                textAlign: TextAlign.center,
                ),
            ),
            ),
        ],
        ),
    ),
    );
});

    Bekommen Sie so etwas wie dieses:

    Alert Dialog mit Abgerundeten Ecken flattern

    EDIT:

    Obwohl Flattern in letzter Zeit eingeführt, die shape-Eigenschaft was würde Ihnen helfen, mit den abgerundeten Ecken, indem ein ShapeBorder mit z.B.

    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(20.0))
),

    würden Sie noch brauchen, um schnell fügen Sie eine benutzerdefinierte widget für einige Anpassungen, wie benutzerdefinierte Polsterung, wie oben angegeben.

    • Ihre Klasse customAlertDialog sollte die ersten-mit einer Kappe bedeckt.
    • bearbeitet dass.
    InformationsquelleAutor Bostrot
  2. 30

    Obwohl ich bin spät dran mit der Lösung, aber das kann anderen helfen, nach ihm zu suchen. Die folgenden code-snippets details, wie es erreicht werden kann. 

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Rounde Alert Box",
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: myColor,
          title: Text("Rounded Alert Box"),
        ),
        body: RoundedAlertBox(),
      ),
    );
  }
}

class RoundedAlertBox extends StatefulWidget {
  @override
  _RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}

class _RoundedAlertBoxState extends State<RoundedAlertBox> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: openAlertBox,
        color: myColor,
        child: Text(
          "Open Alert Box",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  openAlertBox() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(32.0))),
            contentPadding: EdgeInsets.only(top: 10.0),
            content: Container(
              width: 300.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text(
                        "Rate",
                        style: TextStyle(fontSize: 24.0),
                      ),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                        ],
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 5.0,
                  ),
                  Divider(
                    color: Colors.grey,
                    height: 4.0,
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 30.0, right: 30.0),
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: "Add Review",
                        border: InputBorder.none,
                      ),
                      maxLines: 8,
                    ),
                  ),
                  InkWell(
                    child: Container(
                      padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
                      decoration: BoxDecoration(
                        color: myColor,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(32.0),
                            bottomRight: Radius.circular(32.0)),
                      ),
                      child: Text(
                        "Rate Product",
                        style: TextStyle(color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}

    Die Ausgabe der code-snippet sieht wie folgt aus:
    Alert Dialog mit Abgerundeten Ecken flattern

    InformationsquelleAutor Sarbagya Dhaubanjar
  3. 17

    Dieser arbeitete für mich:

       shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(32.0))),
    • Dies sollte die akzeptierte Antwort. Die shape - tag gehört zu Dialog oder AlertDialog oder ähnliches.
    InformationsquelleAutor Manikandan
  4. 6

    VERSUCHEN ADD

    HTML:

    shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0))
         
);

    • danke! dies sollte die wahre Antwort auf diese Frage hier.
    InformationsquelleAutor ck chan
  5. 5

    Versuchen, diesen code :

    AlertDialog(
   shape: RoundedRectangleBorder(borderRadius: 
    BorderRadius.all(Radius.circular(15))),
    title: Text('Your title!'),
    content: Container(),
);
    InformationsquelleAutor Naveen Aluri
  6. 1

    hinzufügen

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
            title: Text("Loading..."),
            content: CircularProgressIndicator(),
          );
        },
      );
    InformationsquelleAutor jeidison farias
  7. 0

    War ich bei der Suche diese Antworten, und keiner von Ihnen hat mir geholfen, das gewünschte Aussehen erreicht ist.

    Ich bemerkte, dass es eine Standard-Polsterung, so dass alles, was ich Tat, war:

    AlertDialog(
          titlePadding: EdgeInsets.all(0),
          title: Container(
            height: 30.00,
            width: 300.00,
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(32), topRight: Radius.circular(32)),
            ),
        ), 
)

    Ich überschrieb die titlePadding - Attribut, und es kam gerade Recht. Es gibt auch eine contentPadding Attribut, wenn Sie irgendwelche Probleme mit diesem. Kopiert habe ich dies von einem meiner apps nur um zu zeigen, das Attribut, aber es gilt für diesen Fall als gut.

    InformationsquelleAutor miloskarakas
Schreibe einen Kommentar