4

What i'd like to do is align the tabs to the left. I've looked at this and this but they don't help me. I've also tried including a column so i can use cross axis aligment but that gives me this type mismatch "The argument type 'Column' can't be assigned to the parameter type 'PreferredSizeWidget'." I'm thinking there has to be a simple way, but i'm out of ideas

child: Scaffold(
  appBar: AppBar(
    title: Text(advisoryService.number),
    flexibleSpace: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[],
    ),
    bottom: TabBar(
      labelPadding: EdgeInsets.only(left: 8, right: 8),
      isScrollable: true,
      tabs: <Widget>[
        Tab(
          text: 'General',
        ),
        Tab(
          text: 'Financial',
        ),
        Tab(
          text: 'Experts & Participants',
        ),
      ],
    ),
  ),
  body: TabBarView(
morgred
  • 969
  • 5
  • 15
  • 26

1 Answers1

8

Edit: I have update full code and working demo
You can use Alignment.centerLeft
and control full TarBar size with Container and set to relative screen width

    appBar: AppBar(
        title: Text(widget.title),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(20.0),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              child: TabBar(
                isScrollable: true,
                controller: _tabController,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                  Tab(text: 'Tab 4'),
                  Tab(text: 'Tab 5'),
                ],
              ),
            ),
          ),
        ),
      ),

Working demo

enter image description here

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Tabs Demo';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key key, this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _tabIndex = 0;

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 5);
  }

  void _toggleTab() {
    _tabIndex = _tabController.index + 1;
    _tabController.animateTo(_tabIndex);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        notchMargin: 20,
        child: new Row(
          // mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            InkWell(
              onTap: () {
                _toggleTab();
              },
              child: Text(
                'Next >',
                style: TextStyle(fontSize: 20, color: Colors.red),
              ),
            )
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(20.0),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              child: TabBar(
                isScrollable: true,
                controller: _tabController,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                  Tab(text: 'Tab 4'),
                  Tab(text: 'Tab 5'),
                ],
              ),
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 1'),
                  subtitle: Text('Click on Next Button to go to Tab 2.'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 2'),
                  subtitle: Text('Click on Next Button to go to Tab 3'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 3'),
                  subtitle: Text('The End'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 4'),
                  subtitle: Text('The End'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 5'),
                  subtitle: Text('The End'),
                ),
              ],
            ),
          ),
        ],
      ),
    ));
  }
}
chunhunghan
  • 51,087
  • 5
  • 102
  • 120
  • I see what you did, but i'm considering other screen sizes as well. I really dislike this particular solution, as it's not alignment, but in lack of better options i guess it has to do. Still, for this to work the right padding needs to be calculated as the difference between the screen width and the space the TabBar with the is scrollable property on. Can i do that? Of course, there's also the case where the screen changes size (orientation) and it needs to be recalculated, but that's a small case i can go after later. – morgred Nov 21 '19 at 17:00
  • I have update my answer. You can control full tarBar size with Container, set to relative screen width – chunhunghan Nov 25 '19 at 01:49