skip to Main Content

This is the initial welcome screen:


This is the home screen when I successfully logged in:

Logout button:

When I click that logout button on the home screen the button styles are unexpectedly changed to another style as below:

How can I fix this issue?

Here is my source code of HomeScreen and I tried to fix it but not finished yet.

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ListItem(),
    );
  }
}

class ListItem extends StatefulWidget {
  const ListItem({super.key});

  @override
  ListItemState createState() => ListItemState();
}

class ListItemState extends State<ListItem> {
  final int listLength = 30;
  late List<String> users = [];

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  @override
  void dispose() {
    users.clear();
    super.dispose();
  }

  void fetchUsers() async {
    final uri = Uri.parse('${Constants.apiUrl}/users');
    Response response = await get(uri, headers: Constants.apiHeader);
    final body = jsonDecode(response.body);
    setState(() {
      users = List<String>.from(body);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("UserList"),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return const WelcomeScreen();
                  }),
                  // ModalRoute.withName('/'),
                );
              },
            ),
          ],
        ),
        body: ListBuilder(
          isSelectionMode: false,
          selectedList: users,
          onSelectionChange: (bool x) {},
        ));
  }
}

class ListBuilder extends StatefulWidget {
  const ListBuilder({
    super.key,
    required this.selectedList,
    required this.isSelectionMode,
    required this.onSelectionChange,
  });

  final bool isSelectionMode;
  final List<String> selectedList;
  final Function(bool)? onSelectionChange;

  @override
  State<ListBuilder> createState() => _ListBuilderState();
}

class _ListBuilderState extends State<ListBuilder> {
  void _toggle(int index) {
    if (widget.isSelectionMode) {
      setState(() {
        widget.selectedList[index] = widget.selectedList[index];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: widget.selectedList.length,
        itemBuilder: (_, int index) {
          return ListTile(
              onTap: () => _toggle(index),
              leading: const Icon(Icons.person),
              title: Text(widget.selectedList[index]));
        });
  }
}

2

Answers


  1. Try creating a reusable button and apply the decoration at one place and then use that reusable button in your code.

    It will make your code more dynamic and less code duplication and hopefully it will solve the problem.

    Try this solution and update us here. I hope my answer will help you 🙂

    Login or Signup to reply.
  2. Design your button and separate it as a widget. Use it on both sides.

    or

    Create a theme for MaterialApp and give the button style from there.

    MaterialApp

    MaterialApp.router(
            theme: AppThemes.lightTheme,
            darkTheme: AppThemes.darkTheme,
          )),
    

    Basic Theme (Please set button style)

     class AppThemes {
      static final ThemeData lightTheme = ThemeData.from(
        colorScheme: const ColorScheme.light(
          primary: AppColors.primary,
        ),
      ).copyWith(
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ElevatedButton.styleFrom(
                  minimumSize: const Size(130, 60),
                  padding: AppPaddings.leftRightExtraLarge())));
    
      static final ThemeData darkTheme = ThemeData.from(
        colorScheme: const ColorScheme.dark(
          primary: AppColors.primary,
        ),
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search