Question 75368 in Flutter Question posted in
The official Flutter documentation can be found here.

Why text flexibleSpace widget is above title appbar – Flutter

I am new to flutter. I would like a long title to appear in the appbar and I want to put it in the flexibleSpace. So, I enlarged the appbar but I don’t understand why it appears at the very top?

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(200),
          child: AppBar(
              bottom: const TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.view_carousel)),
                  Tab(icon: Icon(Icons.grid_view))
                ],
              ),
              flexibleSpace: const Text('SubTitle very long..........................'),
              title: const Text('Title',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ))),
        ),
        body: const TabBarView(
          children: [AttendanceCarousel(), AttendanceGrid()],
        ),
      ),
    );
  }

I followed the Flutter doc but it looks like that ?

enter image description here

Tags:

2

Answers


  1. 0 
    @override
  Widget build(BuildContext context) {
    return DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: AppBar(
              title: Column(
                children: const [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text('SubTitle very long..........................', style: TextStyle(
                      color: Colors.black54,
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold,
                    ),),
                  ),
                  SizedBox(height: 20,),
                  Text(
                    'Title',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
              bottom: const TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.view_carousel)),
                  Tab(icon: Icon(Icons.grid_view)),
                ],
              ),
            ),
            body: TabBarView(
             children: [
               AttendanceCarousel(),
               AttendanceGrid(),
             ],
                ),
          ),
        );
  }

    enter image description here

    happy coding…

    Login or Signup to reply.
  2. 0

    You must align the Text Widget with Align Widget and set its align property according to your need.

    Sample Code : –

    flexibleSpace: const Align( // <-- Use Align Widget
    alignment: Alignment.center,
    child:
        Text('SubTitle very long..........................')
),

    Full Code : –

    import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class CustomCard extends StatelessWidget {
  const CustomCard(this.label, {Key? key}) : super(key: key);
  final String label;
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Container(
        color: Colors.grey[100],
        width: 128,
        height: 128,
        child: Center(
          child: Text(
            label,
            style: const TextStyle(fontSize: 16),
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: const Size.fromHeight(200),
            child: AppBar(
                bottom: const TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.view_carousel)),
                    Tab(icon: Icon(Icons.grid_view))
                  ],
                ),
                flexibleSpace: const Align( // <-- Use Align Widget
                    alignment: Alignment.center,
                    child:
                        Text('SubTitle very long..........................')),
                title: const Text('Title',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ))),
          ),
          body: const TabBarView(
            children: [
              Center(child: Text('1st Page')),
              Center(child: Text('2nd Page'))
            ],
          ),
        ),
      ),
    );
  }
}

    Output : –

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search