CODEWITHSUNDEEP
flutterflutter-layoutnavigator
Jonatan Sciaky
Jonatan Sciaky

Reputation: 41

changing pages in flutter

I'm trying to program an app with flutter, but I'm not getting whats the best way to change pages, I'd like to have a bottom navigation bar to change between pages, but I would also want to be able to change page by scrolling on the left or right, and I also want to have a button on the app bar to switch to a separate page, I'm not getting if I should use the navigator or the pageview, and if I have to use the navigator, should each page have its own scaffold? because I tried that way but I don't like the fact that every time not only the page changes but also the bottom nav bar and the app bar, thanks!

Upvotes: 1

Views: 1183

Answers (1)

Septian Dika
Septian Dika

Reputation: 596

The answer to your question has a lot of tutorials and documents. for using the bottom navigation bar with scrollable for moving each page is using TabBar widget

You can put TabBar widget on bottomNavigationBar properties inside Scaffold and wrap TabBar with Container for giving a background color.

TabBar widget have isScrollable properties to able move each page by scrolling. Example:

main.dart

import 'package:flutter/material.dart';
import 'package:app_name/structure.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Structure(),
      );
  }
}

create new dart file

structure.dart

import 'package:flutter/material.dart';
import 'package:app_name/homepage.dart';
import 'package:app_name/searchpage.dart';
import 'package:app_name/notificationpage.dart';

class Structure extends StatefulWidget {
  const Structure({Key? key}) : super(key: key);

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

class _StructureState extends State<Structure> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _currentTabIndex = 0;
  TabController _controller;

  final _pages = [
    HomePage(),
    SearchPage(),
    NotificationPage(),
    // add any page class
  ];

  final _bottomBarItems = [
    Tab(text: "Home", icon: Icon(Icons.home)),
    Tab(text: "Search", icon: Icon(Icons.search)),
    Tab(text: "Notif", icon: Icon(Icons.notifications)),
    // add any icon for each page class on bottom bar navigation
  ];

  void onTapBar(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2);
    _controller.addListener(_handleTabSelection);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        // drawer widget for build separate page u want
        // with hamburger icon in App Bar
      ),
      appBar: AppBar(),
      body: _pages[_currentTabIndex],
      bottomNavigationBar: Container(
        color: Colors.white,
        child: TabBar(
          isScrollable: false,
          // set isScrollable to true
          // if you want to able move the page by scrolling 
          controller: _controller,
          unselectedLabelColor: Colors.black87,
          labelStyle: TextStyle(fontSize: 10),
          labelColor: Colors.red.shade700,
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 3),
          insets: EdgeInsets.fromLTRB(40, 0, 40, 0)),
          tabs: _bottomBarItems,
       ),
      ),
    );
  }
}

Note: you need to set isScrollable to true

for each page, you can write with Stateless or Stateful widget class with new dart file

for example

homepage.dart

import 'package:flutter/material.dart';

class HoomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
    );
  }
}

For the separate page you want, you can use drawer properties inside Scaffold widget. you can check here for build a Drawer widget

Upvotes: 3

Related Questions