CODEWITHSUNDEEP
dartflutter
Cleudice Santos
Cleudice Santos

Reputation: 241

How to implement the AccountDetail of the UserAccountsDrawerHeader widget to be displayed the same as the Gmail App with Flutter?

I'm using the Flutter UserAccountsDrawerHeader widget to display the user's data but I could not figure out how to implement the onDetailsPressed() function to call the user details. Here is my code:

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      drawer: _buildDrawer(context),
      appBar: _buildAppBar(),
    );
  }
}

Widget _buildAppBar() {
  return new AppBar();
}

Widget _buildDrawer(BuildContext context) {
  return new Drawer(
    child: new ListView(
      children: <Widget>[
        new UserAccountsDrawerHeader(
          accountName: new Text("Cleudice Santos"),
          accountEmail: new Text("[email protected]"),
          onDetailsPressed: () {},
        ),
        new ListTile(
          title: new Text("Visão geral"),
          leading: new Icon(Icons.dashboard),
          onTap: () {
            print("Visão geral");
          },
        ),
      ],
    ),
  );
}

I want to click the arrow and show the account details as shown below. That is, overlapping the content of the drawer. As the Gmail app does.

Upvotes: 6

Views: 8710

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40443

Basically, what you should be doing is replacing the rest of the content with user details rather than the current list. The simplest way to do this is to make your drawer into a stateful widget and have a boolean that keeps track of whether user details or the normal list should be shown.

I've added that to your code (and added a bit to make it self-contained so you can paste it to a new file to test out):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: UserDetailDrawer(),
      appBar: _buildAppBar(),
    );
  }
}

Widget _buildAppBar() {
  return AppBar();
}

class UserDetailDrawer extends StatefulWidget {
  @override
  _UserDetailDrawerState createState() => _UserDetailDrawerState();
}

class _UserDetailDrawerState extends State<UserDetailDrawer> {
  bool showUserDetails = false;

  Widget _buildDrawerList() {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text("Visão geral"),
          leading: Icon(Icons.dashboard),
          onTap: () {
            print("Visão geral");
          },
        ),
        ListTile(
          title: Text("Another tile??"),
          leading: Icon(Icons.question_answer),
        ),
      ],
    );
  }

  Widget _buildUserDetail() {
    return Container(
      color: Colors.lightBlue,
      child: ListView(
        children: [
          ListTile(
            title: Text("User details"),
            leading: Icon(Icons.info_outline),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(children: [
        UserAccountsDrawerHeader(
          accountName: Text("Cleudice Santos"),
          accountEmail: Text("[email protected]"),
          onDetailsPressed: () {
            setState(() {
              showUserDetails = !showUserDetails;
            });
          },
        ),
        Expanded(child: showUserDetails ? _buildUserDetail() : _buildDrawerList())
      ]),
    );
  }
}

Upvotes: 7

Related Questions