Как создать кнопку панели навигации с виджетом без состояния в флаттере? - PullRequest
Новая
       74

Как создать кнопку панели навигации с виджетом без состояния в флаттере?

0 голосов
/ 18 марта 2020 
import 'package:flutter/material.dart';
import 'auth.dart';



// Log Out Button 

class HomePage extends StatelessWidget {
HomePage({this.auth, this.onSignedOut});

final BaseAuth auth;
final VoidCallback onSignedOut;

void _signedOut() async {
 try {
  await auth.signOut();
  onSignedOut();
} catch (e) {
  print(e);
}
}
@override
Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('Home'),
 actions: <Widget>[
  new FlatButton(
  child: new Text('Logout',
  style: new TextStyle(fontSize: 17.0, color: Colors.lime)),
  onPressed: _signedOut)
 ],
 ),
 );
 }
 }
  1. Хотите добавить панель навигации, однако, чтобы иметь возможность изменять состояние (переход с одной страницы на другую), она должна находиться в виджете с состоянием. Как мне обойти это? <</li>

1 Ответ

0 голосов
/ 18 марта 2020

Это должен быть StatefulWidget

Надеюсь, это поможет 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BottomNavigationBar1 extends StatefulWidget{
  @override
  _BottomNavigationBar1State createState() =>_BottomNavigationBar1State();
}

class _BottomNavigationBar1State extends State<BottomNavigationBar1>{

  int _currentIndex =0;

  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];




  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar Sample"),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_currentIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (index){
          setState(() {
            _currentIndex = index;
          });
        },
        selectedItemColor: Colors.amber,
      ),
    );
  }
}
...