Using tabs to navigate screens in flutter

user_10183528 0
Viewed 504

The tabs page have three tabs- Nearby,Recent and Notice tabs. 

Tabs.dart-
class Tabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        SizedBox(width: 24),
        MyTab(text: 'Nearby', isSelected: false),
        MyTab(text: 'Recent', isSelected: true),
        MyTab(text: 'Notice', isSelected: false),
      ],
    );
  }
}

class MyTab extends StatelessWidget {
  final String text;
  final bool isSelected;

  const MyTab({Key key, @required this.isSelected, @required this.text})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            text,
            style: TextStyle(
              fontSize: isSelected ? 16 : 14,
              color: isSelected ? Colors.black : Colors.grey,
              fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
            ),
          ),
          Container(
            height: 6,
            width: 20,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              color: isSelected ? Color(0xFFFF5A1D) : Colors.white,
            ),
          )
        ],
      ),
    );
  }
}

In the home-page.dart file the tabs defined in tabs.dart file is called but are non-functional -

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: <Widget>[
          SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: 8),
                Header(),
                SizedBox(height: 40),
                Tabs(),
                SizedBox(height: 8),
                SlidingCardsView(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

As you can see that the SlidingCardsView() is called below the tabs, but I want to open the SlidingCardsView() on clicking the recent tab and further PageOne() to Nearby and PageTwo() to notice tabs. Can anyone help me with this?.Thanks in Advance.

dart flutter tabs
1 Answers

enter image description here

Here is the code, change things according to your needs further, 

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Tabs(refresh: () => setState(() {})),
            value == 0 ? Center(child: Text("Nearby Page", style: TextStyle(fontSize: 56))) : Container(),
            value == 1 ? Center(child: Text("Recent Page", style: TextStyle(fontSize: 56))) : Container(),
            value == 2 ? Center(child: Text("Notice Page", style: TextStyle(fontSize: 56))) : Container(),
          ],
        ),
      ),
    );
  }
}

class Tabs extends StatefulWidget {
  final Function refresh;

  Tabs({this.refresh});

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

int value = 1;

class _TabsState extends State<Tabs> {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        SizedBox(width: 24),
        MyTab(text: 'Nearby', isSelected: value == 0, onTap: () => _updateValue(0)),
        MyTab(text: 'Recent', isSelected: value == 1, onTap: () => _updateValue(1)),
        MyTab(text: 'Notice', isSelected: value == 2, onTap: () => _updateValue(2)),
      ],
    );
  }

  void _updateValue(int newValue) {
    widget.refresh();
    setState(() {
      value = newValue;
    });
  }
}

class MyTab extends StatelessWidget {
  final String text;
  final bool isSelected;
  final Function onTap;

  const MyTab({Key key, @required this.isSelected, @required this.text, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        onTap: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              text,
              style: TextStyle(
                fontSize: isSelected ? 16 : 14,
                color: isSelected ? Colors.black : Colors.grey,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
              ),
            ),
            Container(
              height: 6,
              width: 20,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                color: isSelected ? Color(0xFFFF5A1D) : Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}
user_66186220
Related