2017-10-20 4 views
2

ユーザーが名前を入力できるようにSimpleDialogを作成しようとしています。それはダイアログが半分、オンスクリーンキーボードで隠されて表示されている場合でも:キーボードで覆われていないテキストフィールドダイアログを表示しますか?

Screenshot

にはどうすればDialogが完全に表示されるように得ることができますか?

編集:ホームページのウィジェット(FocusVisibilityDemo)が高さの低下を認識しているため、「プッシュミー」ボタンの位置を中央に維持するように調整するのは奇妙です。残念ながら、ダイアログは同じように動作しません。ここで

は私のコードです:

import 'package:flutter/material.dart'; 

class FocusVisibilityDemo extends StatefulWidget { 
    @override 
    _FocusVisibilityDemoState createState() => new _FocusVisibilityDemoState(); 
} 

class _FocusVisibilityDemoState extends State<FocusVisibilityDemo> { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(title: new Text('Text Dialog Demo')), 
     body: new Center(
     child: new RaisedButton(
      onPressed: _showDialog, 
      child: new Text("Push Me"), 
     ), 
    ), 
    ); 
    } 

    _showDialog() async { 
    await showDialog<String>(
     context: context, 
     child: new AlertDialog(
     contentPadding: const EdgeInsets.all(16.0), 
     content: new Row(
      children: <Widget>[ 
      new Expanded(
       child: new TextField(
       autofocus: true, 
       decoration: new InputDecoration(
        labelText: 'Full Name', hintText: 'eg. John Smith'), 
      ), 
      ) 
      ], 
     ), 
     actions: <Widget>[ 
      new FlatButton(
       child: const Text('CANCEL'), 
       onPressed:() { 
       Navigator.pop(context); 
       }), 
      new FlatButton(
       child: const Text('OPEN'), 
       onPressed:() { 
       Navigator.pop(context); 
       }) 
     ], 
    ), 
    ); 
    } 
} 

void main() { 
    runApp(new MaterialApp(home: new FocusVisibilityDemo())); 
} 
+0

あなたは、このケースでは、フルスクリーンタイピングを使用することをお勧めします。 – Darky

答えて

2

ご利用の場合は、あなたのDialog内の複数のTextFieldsを追加する場合は、あなたのメインFormが混雑して取得していないので、私はあなたがAlertDialog以上のカスタマイズ可能なものを構築する場合、それが優れていると思いますSimpleDialogは、単純な活動(確認、ラジオなど)に使用されるためです。

それ以外の場合、TextFieldにはDialogをなぜ使いたいのですか?我々は、複数のTextField Sを追加すると、他の人がデータを埋めるために、このビューと対話するので、

我々は、この場合には、私はPageRouteクラスのfullscreenDialogプロパティを使用することを好む、私たちのデザインの選択には注意する必要があります。フラフラにはSimpleDialogが適しているかどうかはわかりません。いくつかを行った後

import 'package:flutter/material.dart'; 


void main() { 
    runApp(new MaterialApp(home: new MyApp(),)); 
} 

class MyApp extends StatefulWidget { 
    @override 
    MyAppState createState() => new MyAppState(); 
} 

class MyAppState extends State<MyApp> { 
    FullScreenDialog _myDialog = new FullScreenDialog(); 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
      title: new Text("Fill this form"), 
     ), 
     body: new Column(
      children: <Widget>[ 
      new TextField(controller: new TextEditingController(
       text: "Add a single text field"),), 

      new Card(child: new ListTile(
       title: new Text("Click to add your top 3 amazing skills"), 
       subtitle: new Text(
        "${_myDialog._skillOne} ${_myDialog._skillTwo} ${_myDialog 
         ._skillThree}"), 
       onTap:() { 
       Navigator.push(context, new MaterialPageRoute(
        builder: (BuildContext context) => _myDialog, 
        fullscreenDialog: true, 
       )); 
       }, 
      ), 
      ), 
      ], 
     ) 
    ); 
    } 

} 


class FullScreenDialog extends StatefulWidget { 
    String _skillOne = "You have"; 
    String _skillTwo = "not Added"; 
    String _skillThree = "any skills yet"; 

    @override 
    FullScreenDialogState createState() => new FullScreenDialogState(); 
} 

class FullScreenDialogState extends State<FullScreenDialog> { 
    TextEditingController _skillOneController = new TextEditingController(); 
    TextEditingController _skillTwoController = new TextEditingController(); 

    TextEditingController _skillThreeController = new TextEditingController(); 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
      title: new Text("Add your top 3 skills"), 
     ), 
     body: new Padding(child: new ListView(
      children: <Widget>[ 
      new TextField(controller: _skillOneController,), 
      new TextField(controller: _skillTwoController,), 
      new TextField(controller: _skillThreeController,), 
      new Row(
       children: <Widget>[ 
       new Expanded(child: new RaisedButton(onPressed:() { 
        widget._skillThree = _skillThreeController.text; 
        widget._skillTwo = _skillTwoController.text; 
        widget._skillOne = _skillOneController.text; 
        Navigator.pop(context); 
       }, child: new Text("Save"),)) 
       ], 
      ) 
      ], 
     ), padding: const EdgeInsets.symmetric(horizontal: 20.0),) 
    ); 
    } 


} 

EDIT

:ここ

は、私はこのヘルプを願っていますし、あなたはそれをあなたが望む方法を変更することができるはず FullScreenDialogの使用方法の簡単な例であります現在のFlutterバージョンでは this is a bugと思われますが、この問題では一時的な修正も記載されています。

enter image description here

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(home: new FocusVisibilityDemo())); 
} 

class FocusVisibilityDemo extends StatefulWidget { 
    @override 
    _FocusVisibilityDemoState createState() => new _FocusVisibilityDemoState(); 
} 


class _FocusVisibilityDemoState extends State<FocusVisibilityDemo> { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(title: new Text('Text Dialog Demo')), 
     body: new Center(
     child: new RaisedButton(
      onPressed: _showDialog, 
      child: new Text("Push Me"), 
     ), 
    ), 
    ); 
    } 

    _showDialog() async { 
    await showDialog<String>(
     context: context, 
     child: new _SystemPadding(child: new AlertDialog(
     contentPadding: const EdgeInsets.all(16.0), 
     content: new Row(
      children: <Widget>[ 
      new Expanded(
       child: new TextField(
       autofocus: true, 
       decoration: new InputDecoration(
        labelText: 'Full Name', hintText: 'eg. John Smith'), 
      ), 
      ) 
      ], 
     ), 
     actions: <Widget>[ 
      new FlatButton(
       child: const Text('CANCEL'), 
       onPressed:() { 
       Navigator.pop(context); 
       }), 
      new FlatButton(
       child: const Text('OPEN'), 
       onPressed:() { 
       Navigator.pop(context); 
       }) 
     ], 
    ),), 
    ); 
    } 
} 


class _SystemPadding extends StatelessWidget { 
    final Widget child; 

    _SystemPadding({Key key, this.child}) : super(key: key); 

    @override 
    Widget build(BuildContext context) { 
    var mediaQuery = MediaQuery.of(context); 
    return new AnimatedContainer(
     padding: mediaQuery.padding, 
     duration: const Duration(milliseconds: 300), 
     child: child); 
    } 
} 
+0

いいえ私は複数のテキストフィールドを追加したくない - 私は単純に1つのテキスト値を入力したい。私の場合は画面がきれいで最小限に抑えられているので、ダイアログが適切です。私に説明しましょう:「新しいゲームを作成する」と「共有ゲームにアクセスする」の2つのボタンを持つゲームのホーム画面を想像してみましょう。ユーザーが2番目のボタンをクリックすると、アプリはユーザーにアクセスしたいゲームの一意のIDを入力するようユーザーに求めます。 – Mark

+0

私の悪い、私はこれがバグとして発行されたことを発見したので、答えの編集セクションをチェックしてください。 – aziza

+0

ありがとうございます - _SystemPaddingの回避策は私にとってうまくいっています! – Mark

関連する問題