v1: `Tabs` looks wrong compared to Flutter

[FeodorFitsner]

This is how Tabs control looks in Flet:

https://github.com/user-attachments/assets/62dcd8d6-700b-4688-8d6c-c98a2e1d10ed

This is how Tabs looks in Flutter:

https://github.com/user-attachments/assets/5ec9a46e-af88-4018-b0c5-a28d31e05b38

[amogus-gggy]

That is normal. Flet is based on flutter, but it is not flutter. Little visual diffrences is not a bug.

[felixholfelder]

Having the same issue here. @FeodorFitsner Do you have any updates on this?

[ndonkoHenri]

Repro in dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TabExample(),
    );
  }
}

class TabExample extends StatefulWidget {
  const TabExample({super.key});

  @override
  State<TabExample> createState() => _TabExampleState();
}

class _TabExampleState extends State<TabExample>
    with SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 3,
        child: Column(
          children: [
            TabBar(
              tabs: const [
                Tab(text: 'First'),
                TabControl(),
                Tab(text: 'Last', icon: Icon(Icons.abc)),
              ],
            ),
            Expanded(
              child: TabBarView(
                children: const [
                  Center(child: Text('Content for the First Tab')),
                  Center(child: Text('Content for the TabControl')),
                  Center(child: Text('Content for the Last Tab')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TabControl extends StatelessWidget {
  const TabControl({super.key});

  @override
  Widget build(BuildContext context) {
    return const Tab(text: 'Tab Control');
  }
}

In Python:

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Tabs(
            selected_index=1,
            length=3,
            expand=True,
            content=ft.Column(
                expand=True,
                controls=[
                    ft.TabBar(
                        tabs=[
                            ft.Tab(icon=ft.Icons.SETTINGS_PHONE),
                            ft.Tab(label="Tab 2", icon=ft.Icons.SETTINGS),
                            ft.Tab(
                                label=ft.CircleAvatar(
                                    foreground_image_src="https://avatars.githubusercontent.com/u/102273996?s=200&v=4",
                                ),
                            ),
                        ]
                    ),
                    ft.TabBarView(
                        expand=True,
                        controls=[
                            ft.Container(
                                content=ft.Text("This is Tab 1"),
                                alignment=ft.Alignment.CENTER,
                            ),
                            ft.Container(
                                content=ft.Text("This is Tab 2"),
                                alignment=ft.Alignment.CENTER,
                            ),
                            ft.Container(
                                content=ft.Text("This is Tab 3"),
                                alignment=ft.Alignment.CENTER,
                            ),
                        ],
                    ),
                ],
            ),
        )
    )


ft.run(main)