top of page

[Flutter/dart] How to make a page that appears on the screen


Overview


In the smartphone app, there is a type of page that appears on the spot without changing the screen (often in notifications, etc.). I'll show you how to make it with Flutter.


Pages like this


Method


Use SimpleDialog. I pass SimpleDialogOption to the children property, and I can pass any Widget to the child: property of this SimpleDialogOption. Here, let's pass ListTile and IconButton.


@override
//Stateful WidgetのState
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          margin: const EdgeInsets.only(top:20, left:20),
          child: RaisedButton(
            child: Text('Tap'),
            onPressed: ()async{await _showPage(context);}, 
            //A page appears with a button tap
          )
      )
    );
  }

//Process where the page appears
  Future<bool> _showPage(BuildContext context) async {
    List<int> _ids = List.generate(4, (index) => index + 1);  
    //List of number

    bool res = await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
              title: Text('Title'),
              children: _ids.map((e) =>
                  SimpleDialogOption(
                    child: ListTile(
                      leading: CircleAvatar(
                        child: Icon(Icons.person),
                      ),
                      title: Text(e.toString()),
                    ),
                  )).toList()
                ..add(
                    SimpleDialogOption(
                        child: IconButton(
                          icon: Icon(Icons.add),
                          onPressed: () {},
                        )
                    )
                )
          );
        }
    );
    return res;
  }
}


Lastly


If the UI is too complicated, it is better to make a page transition, but if you want to display notifications or options, you can display it in this way.

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page