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 repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Debjeet Das 1 Apr 9, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
Flutter UI Challenges

Introduction ?? Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage ?? To

Sanjeev Madhav 58 Dec 22, 2022
A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with ?? in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Shubham Soni 68 Sep 23, 2022
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 49 Nov 14, 2022
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Ali Riza Reisoglu 11 Jan 4, 2023
💙 Google Classroom Clone using Flutter, GCP

Introduction ?? Classroom is a Google Classroom clone built using ?? Flutter. Before we start, you can take a look at the app: Screenshots ?? Key Feat

Sanjeev Madhav 20 Dec 14, 2022
Animated Menu in Flutter using radial.

Animated_radial_Menu_in_Flutter Animated Menu in Flutter using radial. Getting Started This project is a starting point for a Flutter application. A f

Habib ullah 4 Jul 18, 2022
Cool 3D Drawer Animated With flutter part 2 🔥 🔥

Cool 3D Drawer Animated With flutter part 2 ?? ??

Hmida 12 Nov 22, 2022
🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

??‍?? Staggered Animations made with algeria ❤

Hmida 17 Nov 22, 2022
Flutter Animation 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animation ??‍?? Made with algeria By DZ-TM071

Hmida 12 Oct 23, 2022
Flutter Animation 🐱‍👤 Made with algeria 🖤

Flutter-awesome-login-page-animated-fastCode ??‍?? Fast code and awesome design-ui for Login Page ! ?? Getting Started # First you need to add simple_

Hmida 11 Oct 24, 2022