ExpansionTile within an IconButton in AppBar flutter

user_14613807 0
Viewed 407

I'm trying to build a collapse view after clicking an IconButton on my AppBar widget, I used ExpansionTile but nothing happens after I clicked the IconButton.

     appBar: AppBar(
          actions: <Widget>[
           
          IconButton(
            onPressed: () {
  
            ExpansionTile(
              title: Text(
                "Settings",
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold
                ),
              ),
            );

            },
            icon: Icon(Icons.settings),
          ),
          
        ],
    ),

Did I write the code right, or should I consider refactoring it. Thanks in advance!

flutter-layout dart flutter
1 Answers

Yes, you need to refactor your code because you cannot insert a widget into the widget tree this way directly from a function. I'm not sure of what you are trying to do, so I made two assumptions (1) You are trying to show a Expansion Tile in the app bar or (2) You want to show a Popup menu. Please see my code below to understand how you can achieve both.

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      title: 'Welcome to Flutter',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Widget myWidget = Container(
    child: const Text("Flutter"),
  );

  String myText = 'Hello, World!';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: myWidget, actions: [
        IconButton(
          onPressed: () async {
            print(context);
            showMenu(
              context: context,
              position: const RelativeRect.fromLTRB(110.0, 80.0, 0.0, 0.0),
              items: ["One", "Two", "Three", "Four"]
                  .map(
                    (value) => PopupMenuItem<String>(
                      child: Text(value),
                      value: value,
                    ),
                  )
                  .toList(),
              elevation: 8.0,
            );
          },
          icon: Icon(Icons.settings),
        ),
        PopupMenuButton<int>(
          onSelected: (selected) {
            setState(
              () {
                myText = "You selected the menu number $selected";
              },
            );
          },
          itemBuilder: (BuildContext context) => <PopupMenuEntry<int>>[
            const PopupMenuItem<int>(
              value: 1,
              child: Text('First Item'),
            ),
            const PopupMenuItem<int>(
              value: 2,
              child: Text('Second Item'),
            ),
            const PopupMenuItem<int>(
              value: 3,
              child: Text('Thrid Item'),
            ),
            const PopupMenuItem<int>(
              value: 4,
              child: Text('Fourth Item'),
            ),
          ],
        )
      ]),
      body: Center(
        child: Text(myText, style: Theme.of(context).textTheme.headline4),
      ),
    );
  }
}
user_41351330
Related