顫振中的用戶輸入數字對話框

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 ， 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() ，然后使用此代碼通過在容器中創建小部件來彈出您的自定義對話框

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

        ));