“Page de modification de la barre de navigation du fond du fond du bas” Réponses codées

Page de modification de la barre de navigation du fond du fond du bas

import 'package:flutter/material.dart';

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

const String page1 = "Home";
const String page2 = "Service";
const String page3 = "Profile";
const String title = "Demo";

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<Widget> _pages;
  late Widget _page1;
  late Widget _page2;
  late Widget _page3;
  late int _currentIndex;
  late Widget _currentPage;

  @override
  void initState() {
    super.initState();
    _page1 = const Page1();
    _page2 = const Page2();
    _page3 = Page3(changePage: _changeTab);
    _pages = [_page1, _page2, _page3];
    _currentIndex = 0;
    _currentPage = _page1;
  }

  void _changeTab(int index) {
    setState(() {
      _currentIndex = index;
      _currentPage = _pages[index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _currentPage,
      bottomNavigationBar: BottomNavigationBar(
          onTap: (index) {
            _changeTab(index);
          },
          currentIndex: _currentIndex,
          items: const [
            BottomNavigationBarItem(
              label: page1,
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: page2,
              icon: Icon(Icons.home_repair_service),
            ),
            BottomNavigationBarItem(
              label: page3,
              icon: Icon(Icons.person),
            ),
          ]),
      drawer: Drawer(
        child: Container(
          margin: const EdgeInsets.only(top: 20.0),
          child: Column(
            children: <Widget>[
              _navigationItemListTitle(page1, 0),
              _navigationItemListTitle(page2, 1),
              _navigationItemListTitle(page3, 2),
            ],
          ),
        ),
      ),
    );
  }

  Widget _navigationItemListTitle(String title, int index) {
    return ListTile(
      title: Text(
        '$title Page',
        style: TextStyle(color: Colors.blue[400], fontSize: 22.0),
      ),
      onTap: () {
        Navigator.pop(context);
        _changeTab(index);
      },
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('$page1 Page', style: Theme.of(context).textTheme.headline6),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('$page2 Page', style: Theme.of(context).textTheme.headline6),
    );
  }
}

class Page3 extends StatelessWidget {
  const Page3({Key? key, required this.changePage}) : super(key: key);
  final void Function(int) changePage;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('$page3 Page', style: Theme.of(context).textTheme.headline6),
          ElevatedButton(
            onPressed: () => changePage(0),
            child: const Text('Switch to Home Page'),
          )
        ],
      ),
    );
  }
}
Snippets

Comment modifier l'élément lorsque vous cliquez sur la barre de navigation en bas Flux

List<Widget> nonAdminWidgets(_BottomNavScaffoldState parent) {
  return <Widget>[
    ProfilePage(parent),
    ClothesPage(),
    ColorsPage(),
  ];
}

List<Widget> adminWidgets(_BottomNavScaffoldState parent) {
  return <Widget>[
    ProfilePage(parent),
    IdeasPage(),
  ];
}

int _currentIndex = 0;

bool isAdmin = true;

List<dynamic> nonAdminNavBars = [
  BottomNavigationBarItem(
    title: Text('Profile'),
    icon: Icon(Icons.face_rounded),
  ),
  BottomNavigationBarItem(
    title: Text('Clothes'),
    icon: Icon(Icons.design_services_rounded),
  ),
  BottomNavigationBarItem(
    title: Text('Colors'),
    icon: Icon(Icons.colorize_rounded),
  ),
];

List<dynamic> adminNavBars = [
  BottomNavigationBarItem(
    title: Text('Profile'),
    icon: Icon(Icons.face_rounded),
  ),
  BottomNavigationBarItem(
    title: Text('Ideas'),
    icon: Icon(Icons.lightbulb_outline_rounded),
  ),
];

class BottomNavScaffold extends StatefulWidget {
  @override
  _BottomNavScaffoldState createState() => _BottomNavScaffoldState();
}

class _BottomNavScaffoldState extends State<BottomNavScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: isAdmin ? adminWidgets(this)[_currentIndex] : nonAdminWidgets(this)[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        backgroundColor: Colors.orangeAccent,
        selectedItemColor: Colors.white,
        onTap: (value) {
          _currentIndex = value;
          setState(() {});
        },
        items: isAdmin ? adminNavBars : nonAdminNavBars,
      ),
    );
  }
}

class ClothesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Text(
          "Clothes",
        ),
      ),
    );
  }
}

class ColorsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Text(
          "Colors",
        ),
      ),
    );
  }
}

class IdeasPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Text(
          "Ideas",
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  _BottomNavScaffoldState parent;

  ProfilePage(this.parent);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        isAdmin = !isAdmin;
        _currentIndex = 0;
        parent.setState(() {});
      },
      child: Text("Change"),
    );
  }
}
Elumeze Emmanuel

Réponses similaires à “Page de modification de la barre de navigation du fond du fond du bas”

Questions similaires à “Page de modification de la barre de navigation du fond du fond du bas”

Plus de réponses similaires à “Page de modification de la barre de navigation du fond du fond du bas” dans Dart

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code