简体   繁体   中英

how can i build white region of this screen using flutter?

I am new to Flutter framework, i want to create following activity, I have knowledge that how to create Activity permanent area but i don't know about white portion of this screen, what are the widgets used in this screen, kindly guide me how can i create this portion using Flutter?

在此处输入图像描述

Here is My Code

    import 'package:flutter/material.dart';
    
    import 'bottomnavigationbar.dart';
    
    class Contact extends StatefulWidget {
      @override
      _ContactState createState() => _ContactState();
    }
    
    class _ContactState extends State<Contact> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Contact"),
          ),
    
          body: Container(
    
            padding: EdgeInsets.all(1),
            color: Colors.black,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.width/1.6,
                //  constraints: BoxConstraints.expand(),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/contactpage.png"),
                        fit: BoxFit.cover),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8),
                ),
                Text(
                  "Contact Info",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 20,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8),
                ),
                Divider(
                  color: Colors.white,
                  indent: 40,
                  endIndent: 40,
                ),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigation(),
        );
      }
    }

try this example

import 'package:flutter/material.dart';

class UsingAlertDialog extends StatefulWidget{
  @override
  UsingAlertDialogState createState()=> new UsingAlertDialogState();
}

class UsingAlertDialogState extends State<UsingAlertDialog>{
  AlertDialog dialog = new AlertDialog(
    content: new Text(
      "I'm a AlertDialog",
      style: new TextStyle(fontSize: 30.0),
    ),
  );
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Using Alert Dialog"),
      ),
      body: new Container(
        child: new Center(
          child: new RaisedButton(
            child: new Text("Touch Me"),
            onPressed: (){
              showDialog(
                context: context,
                builder: (BuildContext context)=>dialog
              );
            },
          ),
        ),
      ),
    );
  }
}

========= UPDATE ========

The model Component can be a custom Dialog SimpleDialog

about the Phone call u can use this package url_launche

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM