Flutter中的用户输入数字对话框

Question

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

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，您也可以离开控制器。

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;
  },);
},

Answer 2

在您的图像上添加您触发 OnTap()，然后使用此代码通过在 Container 中创建您的小部件来弹出您的自定义对话框

showDialog(
        context: context,
        builder: (_) => Container(
          child: //add you custom widget here

        ));