3

This is what I get when I use CupertinoNavigationBar()

Standard title Navigation Bar - Standard title Navigation Bar

This is what I need to implement - Large title Navigation Bar

Alapan Das
  • 17,144
  • 3
  • 29
  • 52
Paulo Gomo
  • 33
  • 1
  • 3

1 Answers1

6

You can checkout this tutorial for the explanation but the code from the tutorial is:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
          return <Widget>[
            CupertinoSliverNavigationBar(
              largeTitle: Text('Settings'),
            )
          ];
        },
        body: Center(child: Text('Home Page'),),
      ),
    );
  }
}

This code makes a large text an appbar with a large title like the following image:

Appbar image

Morez
  • 2,085
  • 2
  • 10
  • 33