Flutter Samples

Overview

Flutter Samples

You can follow me on twitter @diegoveloper

Getting Started

To build and run this project:

  1. Get Flutter here if you don't already have it
  2. Clone this repository.
  3. cd into the repo folder.
  4. run flutter run-android or flutter run-ios to build the app.

(Please note that a Mac with XCode is required to build for iOS)

IMAGE ALT TEXT

FLUTTER SAMPLES

Hello Flutter Splash screen in Flutter
Fetching & Parsing JSON data Persistent Tab bars
Collapsing Toolbar - Sliver App Bar Shared Element Transitions — Hero
ScrollController and ScrollNotification App Clone - Android Messages
Communication between widgets Animations / Foldable Page
Animations / List-Detail Animations / Circular List/
App Clone / Twitter Profile Clone Custom AppBar & SliverAppBar
Animations / Split Widgets Animations / Custom Sliver Header
Menu Navigations / Header Navigation Animations / Turn on the light
Animations / Hide my widgets Animations / Menu Exploration
App Clone / Photo Concept App Clone / Movies Concept
App Clone / Sports Store App Clone / Shoes Store
App Clone / Album Flow App Clone / Credit Cards Concept
Custom AppBar & SliverAppBar App Clone / Travel Concept Demo
Animations / Shrink Top List Animations / Neon Button
Comments
  • [Question] Disable collapsing effect on Collapsing Toolbar

    [Question] Disable collapsing effect on Collapsing Toolbar

    Hi!

    I have a question about collapsing toolbar and tab bar. Is there a way of disable collapsing eg I switch a specific tab on tab bar?

    thanks in advance

    Lockness

    opened by Stewioie 16
  • Show the drawer menu icon

    Show the drawer menu icon

    Firstly, thank you for sharing! I want to know how to show the drawer menu icon (burger icon) on the left side of appbar. File: flutter-samples/lib/appbar_sliverappbar/main_appbar_sliverappbar.dart Thanks in advance!

    opened by alfianakbar 8
  • Persistent tab is not really persistent

    Persistent tab is not really persistent

    Persistent tab is not really persisting it's view in some situations which leads to app crash when initState is called trying to init state on disposed object.

    FlutterError (setState() called after dispose(): _Page2State#faac0(lifecycle state: defunct, not mounted)

    To reproduce try to add two more tab pages and jump around randomly from tab to tab (it takes several tab changes to reproduce).

    Here's the repro code

    class MainPersistentTabBar extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar: AppBar(
              bottom: TabBar(
                tabs: [
                  Tab(
                    icon: Icon(Icons.directions_car),
                    text: "Non persistent",
                  ),
                  Tab(icon: Icon(Icons.directions_transit), text: "Persistent"),
                  Tab(icon: Icon(Icons.directions_bike), text: "Non Persistent"),
                  Tab(icon: Icon(Icons.directions_boat), text: "Non Persistent"),
                ],
              ),
              title: Text('Persistent Tab Demo'),
            ),
            body: TabBarView(
              children: [
                Page1(),
                Page2(),
                Text('Page 3'),
                Text('Page 4'),
              ],
            ),
          ),
        );
      }
    }
    
    opened by shaxxx 8
  • How to use future builder inside silverlist;

    How to use future builder inside silverlist;

    SliverList( delegate: SliverChildBuilderDelegate((_, index) { final song = songs[index % songs.length]; return ListTile( leading: Image.network( song.image, height: 30, fit: BoxFit.cover, ), title: Text( song.title, ), trailing: IconButton( onPressed: () => null, icon: Icon( Icons.add, color: Colors.pinkAccent, ), ), ); }, childCount: 20), ),

    inside this one,got it from your file

    opened by atta1234 4
  • Follow you splash scrren blog to do,but have a problem(Android)

    Follow you splash scrren blog to do,but have a problem(Android)

    Flutter : Splash Screen

    In Android,from step 1 to 4,I did these, but have a problem is that:

    /Users/happyphper/workspace/rrcp_flutter/android/app/src/main/java/com/example/rrcp_flutter/MainActivity.java:17: error: incompatible types: MainActivity cannot be converted to FlutterEngine
        GeneratedPluginRegistrant.registerWith(this);
                                               ^
    Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
    1 error
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.
    > Compilation failed; see the compiler error output for details.
    ...
    

    I clone you project to local and All is right.

    So I compare android your directory to my directory,

    I find a android/app/src/main/AndroidManifest.xml and android/app/build.gradle are different, the difference is that

    # AndroidManifest.xml
    ...
            <!-- Don't delete the meta-data below.
                 This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
            <meta-data
                android:name="flutterEmbedding"
                android:value="2" />
    ...
    
    # build.gradle
    ...
    ...
    apply plugin: 'com.android.application'
    + apply plugin: 'kotlin-android'
    apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
    ...
    dependencies {
    + implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
        ...
    }
    ...
    

    this is flutter auto created, maybe the result is different version.

    put this code to your project, and the error occurred.

    I can't solve this problem, Could you have any solution?

    My Flutter version.

    [✓] Flutter (Channel master, v1.15.4-pre.82, on Mac OS X 10.15.3 19D76, locale en-CN)
        • Flutter version 1.15.4-pre.82 at /usr/local/flutter
        • Framework revision e481fcae52 (32 hours ago), 2020-02-14 22:34:30 -0800
        • Engine revision d60f298d9e
        • Dart version 2.8.0 (build 2.8.0-dev.9.0 edd64e6d5c)
    
     
    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
        • Android SDK at /Users/wangbaolong/Library/Android/sdk
        • Android NDK location not configured (optional; useful for native profiling support)
        • Platform android-29, build-tools 29.0.2
        • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
        • All Android licenses accepted.
    
    [✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Xcode 11.3.1, Build version 11C504
        • CocoaPods version 1.8.4
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [✓] Android Studio (version 3.5)
        • Android Studio at /Applications/Android Studio.app/Contents
        • Flutter plugin version 41.0.2
        • Dart plugin version 191.8593
        • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    
    [✓] VS Code (version 1.42.1)
        • VS Code at /Applications/Visual Studio Code.app/Contents
        • Flutter extension version 3.8.1
    
    [✓] Connected device (3 available)
        • Android SDK built for x86 64 • emulator-5556 • android-x64    • Android 10 (API 29) (emulator)
        • Chrome                       • chrome        • web-javascript • Google Chrome 79.0.3945.130
        • Web Server                   • web-server    • web-javascript • Flutter Tools
    
    opened by happyphper 4
  • I use your circular_list and i have a question

    I use your circular_list and i have a question

    Hi, I use your circular_list and i would like to open a new route when i click on images, i tried many things but didn't work, i would really appreciate it if u can lend me a hand.

    ps: sorry my english is sooo poor x'(

    opened by Yuiie 4
  • fixed main_split_image.dart's error

    fixed main_split_image.dart's error

    Fixed this error on build:" error: The function expression type 'Future Function(Uint8List, {int cacheHeight, int cacheWidth})' isn't of type 'Future Function(Uint8List, {bool allowUpscaling, int cacheHeight, int cacheWidth})'. This means its parameter or return type doesn't match what is expected. Consider changing parameter type(s) or the returned type(s). (invalid_cast_function_expr at [flutter_samples] lib/split_image/main_split_image.dart:20)"

    It was missing the bool allowupscaling parameter. I have added that, and now its working just fine.

    Screenshot from 2020-10-02 14-02-04

    opened by rushikesh127001 3
  • Initial index / infinite loop and Next/Per button

    Initial index / infinite loop and Next/Per button

    Hello , Hope you doing great , Thanks for your great work . I will be appreciate if you can help me . I used same package " circle_wheel_scroll " , and same example code in read me , to generate a list . and also if possible i wanna add Next and Previous button like a carousel . Thanks in advance

    opened by shayanmomeni 2
  • Unresolved reference: getFlutterView and Type mismatch: inferred type is MainActivity but FlutterEngine was expected

    Unresolved reference: getFlutterView and Type mismatch: inferred type is MainActivity but FlutterEngine was expected

    Type mismatch: inferred type is MainActivity but FlutterEngine was expected flutter_app/android/app/src/main/kotlin/com/example/flutter_app/MainActivity.kt: (23, 19): Unresolved reference: getFlutterView flutter_app/android/app/src/main/kotlin/com/example/flutter_app/MainActivity.kt: (26, 17): Unresolved reference: getFlutterView

    Mainactivity override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) //make transparent status bar window.statusBarColor = 0x00000000 GeneratedPluginRegistrant.registerWith(this) //Remove full screen flag after load val vto = getFlutterView().getViewTreeObserver() vto.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener { override fun onGlobalLayout() { getFlutterView().getViewTreeObserver().removeOnGlobalLayoutListener(this) window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN) } }) }

    opened by sumitrvi 2
  • How to use SliverList in Collapsing Toolbar

    How to use SliverList in Collapsing Toolbar

    Hello Thank you for your SliverAppBar with TabBar example but what i want is also put SliverList to my body because i have a very long list and google recommend using SliverList put when i put SliverList to body i'm getting error maybe you know how to use it with SliverList

    opened by taliptako 2
  • fix: removes most warnings

    fix: removes most warnings

    Changes

    Fixes most dart warnings related to Flutter 2.0.

    Discussion

    I've tried to migrate Android to Flutter embedding but I've found no alternatives to getFlutterView().getViewTreeObserver() and such so I kept it the same. Setting transparency should be as easy as overriding getTransparencyMode but I've no clue about the fullscreen thing.

    opened by Ascenio 1
Owner
Diego Velásquez López
Mobile Software Architect
Diego Velásquez López
This is a collection of Flutter samples.

Flutter Samples This is a collection of Flutter samples. It has comments and code, with examples for the most used "Flutter Widgets". I will add more

Eren 4 Jul 30, 2022
Tencent Cloud Chat: Samples of integratation Flutter SDK to an existing app.

Tencent Cloud Chat Integrate In-App Chat and Call to your existing applications. Samples of integration Flutter SDK to an existing app. This directory

Tencent Cloud 4 Nov 24, 2022
🆙🚀 Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in

???? Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in (with notice bar progress), supports full upgrade, hot update and incremental upgrade

PengHui Li 344 Dec 30, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Pooja Bhaumik 815 Jan 3, 2023
Minha primeira aplicação android utilizando Flutter feito no curso de Flutter da Cod3r Cursos Online. O foco dessa aplicação foi um contato inicial com o Flutter.

expenses Expenses é uma aplicação android simples feita em Flutter para controlar despesas pessoais. A aplicação consiste em: Listar transações feitas

Guilherme Teixeira Ais 2 Apr 19, 2022
Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Mohammad Rahmani 110 Dec 23, 2022
Flutter RSS feed parsing - A demo application of flutter which parse RSS XML contents to the flutter application

Flutter RSS feed parsing demo This is demo application of flutter which shows ho

Nyakuri Levite 3 Nov 15, 2022
Boris Gautier 1 Jan 31, 2022
Code for Flutter Talk from Flutter Vikings 2022: Custom User Interactions in Flutter

Custom User Interactions - Flutter Vikings 2022 A companion app for the Flutter Vikings 2022 talk - Custom User Interactions with Shortcuts, Intents,

Justin McCandless 9 Sep 16, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Johannes Milke 46 Dec 6, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Johannes Milke 45 Dec 15, 2022
Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Johannes Milke 12 Dec 26, 2022
Components that optimize Flutter fluency.(Flutter 流畅度优化的通用方案,轻松解决卡顿问题)

Flutter fluency optimization component "Keframe" Page switching fluency improved: How to use Project depend on: Quick learning Constructor Description

Ke Technologies 793 Dec 30, 2022
Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Weekend With Flutter This is my new challenge. Every weekend, I want to implement challenging UI & digital designs using Flutter. you can join me with

Payam Zahedi 16 Feb 24, 2022
Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Flutter Tutorial - User Profile & SharedPreferences Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's inf

Johannes Milke 21 Dec 3, 2022
Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Johannes Milke 22 Jan 3, 2023
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Oğuzhan Atalay 156 Dec 26, 2022
Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter UI Boilerplate "Sharing for fun" Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file f

Dimas Ibnu Malik 122 Dec 1, 2022