android - flutter 中的用户输入数字对话框

Question

我是 Flutter 的新用户。我正在尝试制作购物 list 应用程序。第一页基本上包含 3 个可点击的图像。这些图像是我们目前购买用品的三个商店的标志。当您单击图像时，它会将您带到另一个页面，该页面具有我们从该商店购买的所有商品(商品图片)的 GridView 。我的最终目标是，当你点击元素的图片时，会弹出一个对话框，询问你想将多少件元素放入列表中，然后将其放入列表中。我已经创建了项目的 GridView ，并使第一个图像可点击，但我不确定如何制作输入对话框。任何帮助将不胜感激。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Shopping List');
  }
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Pick a store to start your list"),
        ),
        body: Column(
          children: [
            Center(
              child: Container(
                child: ConstrainedBox(
                  constraints: BoxConstraints(maxHeight: 150, maxWidth: 150),
                  child: Ink.image(
                    image: AssetImage('images/aldi.jpg'),
                    fit: BoxFit.fitWidth,
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => SecondRoute()),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: ConstrainedBox(
                  constraints: BoxConstraints(maxHeight: 150, maxWidth: 150),
                  child: Ink.image(
                    image: AssetImage('images/rd.png'),
                    fit: BoxFit.fitWidth,
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => ThirdRoute()),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: ConstrainedBox(
                  constraints: BoxConstraints(maxHeight: 150, maxWidth: 150),
                  child: Ink.image(
                    image: AssetImage('images/sams.jpg'),
                    fit: BoxFit.fitWidth,
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => FourthRoute()),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Aldi's"),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: GridView.count(
            crossAxisCount: 2,
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
            children: <Widget>[
              FlatButton(onPressed: (),
                child: Image.asset('images/2milk.jpg'),
              ),
              Image.asset('images/skimMilk.jpg'),
              Image.asset('images/almondMilk.jpg'),
              Image.asset('images/coconutMilk.jpg'),
              Image.asset('images/soyMilk.jpg'),
              Image.asset('images/halfAndHalf.jpg'),
              Image.asset('images/heavyCream.jpg'),
              Image.asset('images/whipCream.jpg'),
            ],
          ),
        ),
      ),
    );
  }
}

class ThirdRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Restraurant Depot"),
      ),
      body: Center(),
    );
  }
}

class FourthRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sam's Club"),
      ),
      body: Center(),
    );
  }
}

Answer 1

要制作对话框，您可以使用许多小部件。我认为这里最好的用例是 AlertDialog，顶部有 TextField 等小部件项目。

在 onTap 中添加这个，如果你不想要无框边框，你可以留下长装饰，我只是添加它们以使我的 TextField 看起来更整洁。如果您不打算使用 TextEditingController，也可以离开 Controller 。

onTap: () {
var alert = AlertDialog(
  title: Text("How many items do you need?"),
  content: TextField(
    style: TextStyle(
      decoration: TextDecoration.none),
    maxLines: 1,
    maxLengthEnforced: false,
    autofocus: false,
    enabled: true,
    onSubmitted: (String text) {
      int number_input = int.parse(text);
      // Do something with your number like pass it to the next material page route
},
    controller: _controller,
    decoration: new InputDecoration(
    errorStyle: TextStyle(color: Colors.redAccent),
    border: new UnderlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromRGBO(40, 40, 40, 1.0),),
      borderRadius: BorderRadius.circular(10.0),),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromRGBO(40, 40, 40, 1.0),),
      borderRadius: BorderRadius.circular(10.0),),
    disabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromRGBO(40, 40, 40, 1.0),),
      borderRadius: BorderRadius.circular(10.0),),
      prefixIcon: new Icon(
        Icons.playlist_add,
        size: 18.0,),),),);

showDialog(
  context: context,
  builder: (context) {
   return alert;
  },);
},