Search code examples
flutterdrawertabbarcontrollerflutter-appbar

I am new in Flutter, how can I add Drawer and Tab bar both aligned same line/one next to another?


In the snap there are drawer and tab options. Both are shown side by side, all in same line .


Solution

  • try this:

    import 'package:flutter/material.dart';
    import 'package:flutter/cupertino.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: SegmentedControl());
      }
    }
    
    class SegmentedControl extends StatefulWidget {
      @override
      _SegmentedControlState createState() => _SegmentedControlState();
    }
    
    class _SegmentedControlState extends State<SegmentedControl> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          endDrawerEnableOpenDragGesture: false, // This way it will not open
          drawer: Drawer(),
          appBar: AppBar(
            title:     CupertinoSlidingSegmentedControl(children: {
          0: Text('Segment 0'),
          1: Text('Segment 1'),
          2: Text('Segment 2'),
        }, groupValue: 0, onValueChanged: (newValue) {}),
            leading: Builder(
              builder: (context) => // Ensure Scaffold is in context
                  IconButton(
                      icon: Icon(Icons.menu),
                      onPressed: () => Scaffold.of(context).openDrawer()),
            ),
          ),
        );
      }
    }