Love the material AppBar? Do you want to add more color to the appbar? Here's a gradientAppBar.

Overview

Gradient App Bar

Love the material AppBar? Do you want to add more color to the appbar? Here's a gradientAppBar.

It works just like the normal AppBar. Also with actions, back buttons, titles. So it's just your normal AppBar, but with a twist!

Screenshots

image image

Getting Started

  1. Depend on it by adding this to your pubspec.yaml file: gradient_app_bar: ^0.1.3

  2. Import it: import 'package:gradient_app_bar/gradient_app_bar.dart'

  3. Replace your current AppBar (In the scaffold) to GradientAppBar.

appBar: GradientAppBar(
    title: Text('Flutter'),
    gradient: LinearGradient(colors: [Colors.blue, Colors.purple, Colors.red])
  ),
Comments
  • cannot hide elevation of the appbar

    cannot hide elevation of the appbar

    I need a consistent gradient color as a whole, but I can't hide the elevation of the appbar.

      @override
      Widget build(BuildContext context) {
    
        Widget regionalSelectionContainer = Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                Color(0xff1AB99D),
                Color(0xff2E2888)
              ])
            )
          );
     
        return Scaffold(
          backgroundColor: Color(0xfff2f1f8),
          appBar: GradientAppBar( //  just copy, no modification
            gradientStart: Color(0xff1AB99D),
            gradientEnd: Color(0xff2E2888),
            elevation: 0, // -----------invalid------------
            title: Text('Regional Selection', style: TextStyle(fontSize: 14)),
            centerTitle: true,
          ),
          body: Container(child: regionalSelectionContainer,)
        );
      }
    

    Snipaste

    opened by itAlvy 6
  • Method not found: 'AnnotatedRegion'

    Method not found: 'AnnotatedRegion'

    I got this error

    compiler message: file:///Users/conneraldrich/.pub-cache/hosted/pub.dartlang.org/gradient_app_bar-0.0.1/lib/gradient_app_bar.dart:393:18: Error: Method not found: 'AnnotatedRegion'.
    compiler message:       child: new AnnotatedRegion<SystemUiOverlayStyle>(
    compiler message:                  ^^^^^^^^^^^^^^^
    
    opened by ConProgramming 5
  • black status bar

    black status bar

    
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
          statusBarColor:
              CustomColors.transparent, 
          statusBarIconBrightness: Brightness.light,
          statusBarBrightness: Brightness.light,
        ));
    
        return DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: GradientAppBar(
              title: Text('Flutter Demo Home Page'),
              gradient: LinearGradient(colors: [Colors.red, Colors.purple]),
              bottom: TabBar(tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.home),
                  text: 'Home',
                ),
                Tab(
                  icon: Icon(Icons.store),
                  text: 'Store',
                )
              ]),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times:',
                  ),
                ],
              ),
            ),
          ),
        );
    

    image

    Doctor summary (to see all details, run flutter doctor -v):
    [√] Flutter (Channel master, 1.24.0-2.0.pre.98, on Microsoft Windows [Version 10.0.19041.572], locale ru-RU)
    [√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    [√] Android Studio (version 3.5)
    [√] VS Code (version 1.50.1)
    [√] Connected device (1 available)
    
    • No issues found!
    
    opened by worldofsites 1
  • How to add icon to leading

    How to add icon to leading

    when I change leading by code:

    leading:new IconButton(
                    icon: new Image.asset(XMIcons.iback, width: 25, height: 25,),
                    tooltip: 'Back',
                    onPressed: () => _onBack(),
                  )
    

    or

    leading: new Center(
                child: new InkWell(
                  onTap: onCancel,
                  child: new Image.asset(XMIcons.iback, width: 25, height: 25,),
                ),
              )
    

    then icon not show. Please help me!

    opened by dovandu 1
  • Error: The method 'ancestorRenderObjectOfType' isn't defined for the class 'BuildContext'.

    Error: The method 'ancestorRenderObjectOfType' isn't defined for the class 'BuildContext'.

    ../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/gradient_app_bar-0.1.3/lib/gradient_app_bar.dart:610:20: Error: The method 'ancestorRenderObjectOfType' isn't defined for the class 'BuildContext'.
     - 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('../../../development/flutter/packages/flutter/lib/src/widgets/framework.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'ancestorRenderObjectOfType'.
        return context.ancestorRenderObjectOfType(const TypeMatcher<RenderSliverFloatingPersistentHeader>());
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^
    Command PhaseScriptExecution failed with a nonzero exit code
    
    opened by yavuztarhan 7
  • Build error

    Build error

    Getting this error after upgrading flutter: ../../flutter/.pub-cache/hosted/pub.dartlang.org/gradient_app_bar-0.1.3/lib/gradient_app_bar.dart:407:57: Error: No named parameter with the name 'nullOk'. final ScaffoldState scaffold = Scaffold.of(context, nullOk: true); ^^^^^^ ../../flutter/packages/flutter/lib/src/material/scaffold.dart:1918:24: Context: Found this candidate, but the arguments don't match. static ScaffoldState of(BuildContext context) { ^^

    Command PhaseScriptExecution failed with a nonzero exit code
    note: Using new build system
    note: Building targets in parallel
    note: Planning build
    note: Constructing build description
    

    Flutter doctor: [✓] Flutter (Channel master, 1.24.0-4.0.pre.160, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-AU) • Flutter version 1.24.0-4.0.pre.160 at /Users/Josh/Developer/flutter • Framework revision 678f3cb4fb (39 minutes ago), 2020-10-29 16:26:16 -0700 • Engine revision 073263e39d • Dart version 2.11.0 (build 2.11.0-260.0.dev)

    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/Josh/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS (Xcode 12.0.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.0.1, Build version 12A7300 • CocoaPods version 1.9.1

    [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

    [✓] Connected device (1 available) • iPhone 11 (mobile) • 056B5D12-1B8A-4639-BC21-1DA9FD02A58A • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)

    • No issues found! Process finished with exit code 0

    opened by jszental 3
  • Build error after upgrading flutter

    Build error after upgrading flutter

    Getting this error after upgrading flutter: ../../flutter/.pub-cache/hosted/pub.dartlang.org/gradient_app_bar-0.1.3/lib/gradient_app_bar.dart:407:57: Error: No named parameter with the name 'nullOk'. final ScaffoldState scaffold = Scaffold.of(context, nullOk: true); ^^^^^^ ../../flutter/packages/flutter/lib/src/material/scaffold.dart:1918:24: Context: Found this candidate, but the arguments don't match. static ScaffoldState of(BuildContext context) { ^^

    Command PhaseScriptExecution failed with a nonzero exit code
    note: Using new build system
    note: Building targets in parallel
    note: Planning build
    note: Constructing build description
    

    Flutter doctor: [✓] Flutter (Channel master, 1.24.0-4.0.pre.160, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-AU) • Flutter version 1.24.0-4.0.pre.160 at /Users/Josh/Developer/flutter • Framework revision 678f3cb4fb (39 minutes ago), 2020-10-29 16:26:16 -0700 • Engine revision 073263e39d • Dart version 2.11.0 (build 2.11.0-260.0.dev)

    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/Josh/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS (Xcode 12.0.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.0.1, Build version 12A7300 • CocoaPods version 1.9.1

    [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

    [✓] Connected device (1 available) • iPhone 11 (mobile) • 056B5D12-1B8A-4639-BC21-1DA9FD02A58A • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)

    • No issues found! Process finished with exit code 0

    opened by jszental 2
Releases(0.1.1)
Owner
Joost Lekkerkerker
Fifth year IT student (Software development specialization)
Joost Lekkerkerker
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

null 3 Jan 28, 2022
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
Responsive Widgets Prefix allows you to add the "Responsive" prefix to any widget that needs scaling or font size increases

Responsive Widgets Prefix allows you to add the Responsive prefix to any widget that needs scaling or font size increases (for varying device screen sizes).

The Mobile Applications Community 2 Apr 18, 2022
Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Animated Search Bar Animated Search Bar package lets you add a beautiful search bar to your Flutter app. Installation Add the latest version of packag

Mohammad Saleh 5 Aug 7, 2022
The color of the widget is different with the counter application

GoldenTestのお試しをしてみた https://pub.dev/packages/golden_toolkit このライブラリを使って、検証する ちなみにマスターのスクリーンショットをGoldenというらしい。 カウンターアプリでWidgetのカラーが違う場合をテストしてみた OK想定 NG

MatsumaruTsusyoshi 0 Oct 18, 2021
An advanced switch widget, that can be fully customized with size, text, color, radius of corners.

flutter_advanced_switch An advanced switch widget, that can be fully customized with size, text, color, radius of corners. Switch Light Switch Dark Ge

Alex Melnyk 13 Dec 15, 2022
A beautiful circle color picker for flutter.

A beautiful circle color picker for flutter.

Takeshi Tsukamoto 46 Dec 29, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
Flutter Color Picker Wheel - an easy to use widget which can be heavily customized

Flutter Color Picker Wheel Flutter Color Picker Wheel is an easy to use widget which can be heavily customized. You can use the WheelColorPicker direc

Kexin Lu 35 Oct 4, 2022
A collapsible sidebar for Flutter apps implementing the Material Design.

collapsible_sidebar A collapsible sidebar for Flutter apps implementing the Material Design. Features Material Design Pre-built customizable tile widg

Arjun Sinha 121 Nov 30, 2022
Add decoration capabilities for the Icon widget with shadows, borders, gradients.

icon_decoration Add decoration capabilities for the Icon widget with shadows, borders, gradients. This new DecoratedIcon widget overlap itself with th

Guillaume Roux 23 Oct 7, 2022
A Flutter library to add bubble tab indicator to TabBar

Bubble Tab Indicator A Flutter library to add bubble tab indicator to TabBar. Getting Started Add package from github by adding the following to your

Vipul Asri 184 Nov 23, 2022
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vũ Phương 2 Jul 4, 2022
A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator.

flutter_tab_indicator A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator. Showcases Installation Showcases Showcases

CrabMan 14 Jun 19, 2022
This repo is for anything that can be reusable in flutter like custom widgets 🟥, animations 🌟and more

Flutter Shortcuts This repo is for anything that can be reusable in flutter like custom widgets ?? , animations ?? and more. How to Use Just get the f

Abdelrahman Mostafa Elmarakby 91 Dec 3, 2022
Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Hugo Delaunay 196 Dec 2, 2022
Flutter package: Similar to a ListView, but lets you programmatically jump to any item, by index.

indexed_list_view Similar to a ListView, but lets you programmatically jump to any item, by index. The index jump happens instantly, no matter if you

Marcelo Glasberg 244 Dec 27, 2022
An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds

An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds. Based on the original idea by @shrouxm he

gskinner team 26 Dec 31, 2022