Baştan sona Twitter'ı yazalım bitiriş #5 (Flutter, Riverpod, Fpdart, Appwrite)

  • Konuyu başlatan Konuyu başlatan 'drose
  • Başlangıç tarihi Başlangıç tarihi

'drose

Moderasyon Tim Lideri
Katılım
7 Tem 2013
Mesajlar
9,325
Çözümler
13
Tepkime puanı
1,588
Baştan sona Twitter'ı yazalım #1 (Flutter, Riverpod, Fpdart, Appwrite)
Baştan sona Twitter'ı yazalım #2 (Flutter, Riverpod, Fpdart, Appwrite)
Baştan sona Twitter'ı yazalım #3 (Flutter, Riverpod, Fpdart, Appwrite)
Baştan sona Twitter'ı yazalım #4 (Flutter, Riverpod, Fpdart, Appwrite)

Refresh widgetını core dan alıp kendimiz bir tık modifiye atıyoruz istediğimiz şey o yukarıdan scrollu indirmek aslında default olarak flutterda var ama tam istediğim şeyi yapamadım aradığımızı buradan çözeceğiz

Kod:
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:async';
import 'dart:math' as math;

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart' show clampDouble;
import 'package:flutter/material.dart';

// The over-scroll distance that moves the indicator to its maximum
// displacement, as a percentage of the scrollable's container extent.
const double _kDragContainerExtentPercentage = 0.25;

// How much the scroll's drag gesture can overshoot the Refreshv2's
// displacement; max displacement = _kDragSizeFactorLimit * displacement.
const double _kDragSizeFactorLimit = 1.5;

// When the scroll ends, the duration of the refresh indicator's animation
// to the Refreshv2's displacement.
const Duration _kIndicatorSnapDuration = Duration(milliseconds: 150);

// The duration of the ScaleTransition that starts when the refresh action
// has completed.
const Duration _kIndicatorScaleDuration = Duration(milliseconds: 200);

/// The signature for a function that's called when the user has dragged a
/// [Refreshv2] far enough to demonstrate that they want the app to
/// refresh. The returned [Future] must complete when the refresh operation is
/// finished.
///
/// Used by [Refreshv2.onRefresh].
typedef RefreshCallback = Future<void> Function();

// The state machine moves through these modes only when the scrollable
// identified by scrollableKey has been scrolled to its min or max limit.
enum _Refreshv2Mode {
  drag, // Pointer is down.
  armed, // Dragged far enough that an up event will run the onRefresh callback.
  snap, // Animating to the indicator's final "displacement".
  refresh, // Running the refresh callback.
  done, // Animating the indicator's fade-out after refreshing.
  canceled, // Animating the indicator's fade-out after not arming.
}

/// Used to configure how [Refreshv2] can be triggered.
enum Refreshv2TriggerMode {
  /// The indicator can be triggered regardless of the scroll position
  /// of the [Scrollable] when the drag starts.
  anywhere,

  /// The indicator can only be triggered if the [Scrollable] is at the edge
  /// when the drag starts.
  onEdge,
}

enum _IndicatorType { material, adaptive }

/// A widget that supports the Material "swipe to refresh" idiom.
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=ORApMlzwMdM}
///
/// When the child's [Scrollable] descendant overscrolls, an animated circular
/// progress indicator is faded into view. When the scroll ends, if the
/// indicator has been dragged far enough for it to become completely opaque,
/// the [onRefresh] callback is called. The callback is expected to update the
/// scrollable's contents and then complete the [Future] it returns. The refresh
/// indicator disappears after the callback's [Future] has completed.
///
/// The trigger mode is configured by [Refreshv2.triggerMode].
///
/// {@tool dartpad}
/// This example shows how [Refreshv2] can be triggered in different ways.
///
/// ** See code in examples/api/lib/material/refresh_indicator/refresh_indicator.0.dart **
/// {@end-tool}
///
/// {@tool dartpad}
/// This example shows how to trigger [Refreshv2] in a nested scroll view using
/// the [notificationPredicate] property.
///
/// ** See code in examples/api/lib/material/refresh_indicator/refresh_indicator.1.dart **
/// {@end-tool}
///
/// ## Troubleshooting
///
/// ### Refresh indicator does not show up
///
/// The [Refreshv2] will appear if its scrollable descendant can be
/// overscrolled, i.e. if the scrollable's content is bigger than its viewport.
/// To ensure that the [Refreshv2] will always appear, even if the
/// scrollable's content fits within its viewport, set the scrollable's
/// [Scrollable.physics] property to [AlwaysScrollableScrollPhysics]:
///
/// ```dart
/// ListView(
///   physics: const AlwaysScrollableScrollPhysics(),
///   // ...
/// )
/// ```
///
/// A [Refreshv2] can only be used with a vertical scroll view.
///
/// See also:
///
///  * <https://material.io/design/platform-guidance/android-swipe-to-refresh.html>
///  * [Refreshv2State], can be used to programmatically show the refresh indicator.
///  * [RefreshProgressIndicator], widget used by [Refreshv2] to show
///    the inner circular progress spinner during refreshes.
///  * [CupertinoSliverRefreshControl], an iOS equivalent of the pull-to-refresh pattern.
///    Must be used as a sliver inside a [CustomScrollView] instead of wrapping
///    around a [ScrollView] because it's a part of the scrollable instead of
///    being overlaid on top of it.
class Refreshv2 extends StatefulWidget {
  /// Creates a refresh indicator.
  ///
  /// The [onRefresh], [child], and [notificationPredicate] arguments must be
  /// non-null. The default
  /// [displacement] is 40.0 logical pixels.
  ///
  /// The [semanticsLabel] is used to specify an accessibility label for this widget.
  /// If it is null, it will be defaulted to [MaterialLocalizations.Refreshv2SemanticLabel].
  /// An empty string may be passed to avoid having anything read by screen reading software.
  /// The [semanticsValue] may be used to specify progress on the widget.
  const Refreshv2({
    super.key,
    required this.child,
    this.displacement = 40.0,
    this.edgeOffset = 0.0,
    required this.onRefresh,
    this.color,
    this.backgroundColor,
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
    this.strokeWidth = RefreshProgressIndicator.defaultStrokeWidth,
    this.triggerMode = Refreshv2TriggerMode.onEdge,
  }) : _indicatorType = _IndicatorType.material;

  /// Creates an adaptive [Refreshv2] based on whether the target
  /// platform is iOS or macOS, following Material design's
  /// [Cross-platform guidelines](https://material.io/design/platform-guidance/cross-platform-adaptation.html).
  ///
  /// When the descendant overscrolls, a different spinning progress indicator
  /// is shown depending on platform. On iOS and macOS,
  /// [CupertinoActivityIndicator] is shown, but on all other platforms,
  /// [CircularProgressIndicator] appears.
  ///
  /// If a [CupertinoActivityIndicator] is shown, the following parameters are ignored:
  /// [backgroundColor], [semanticsLabel], [semanticsValue], [strokeWidth].
  ///
  /// The target platform is based on the current [Theme]: [ThemeData.platform].
  ///
  /// Noteably the scrollable widget itself will have slightly different behavior
  /// from [CupertinoSliverRefreshControl], due to a difference in structure.
  const Refreshv2.adaptive({
    super.key,
    required this.child,
    this.displacement = 40.0,
    this.edgeOffset = 0.0,
    required this.onRefresh,
    this.color,
    this.backgroundColor,
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
    this.strokeWidth = RefreshProgressIndicator.defaultStrokeWidth,
    this.triggerMode = Refreshv2TriggerMode.onEdge,
  }) : _indicatorType = _IndicatorType.adaptive;

  /// The widget below this widget in the tree.
  ///
  /// The refresh indicator will be stacked on top of this child. The indicator
  /// will appear when child's Scrollable descendant is over-scrolled.
  ///
  /// Typically a [ListView] or [CustomScrollView].
  final Widget child;

  /// The distance from the child's top or bottom [edgeOffset] where
  /// the refresh indicator will settle. During the drag that exposes the refresh
  /// indicator, its actual displacement may significantly exceed this value.
  ///
  /// In most cases, [displacement] distance starts counting from the parent's
  /// edges. However, if [edgeOffset] is larger than zero then the [displacement]
  /// value is calculated from that offset instead of the parent's edge.
  final double displacement;

  /// The offset where [RefreshProgressIndicator] starts to appear on drag start.
  ///
  /// Depending whether the indicator is showing on the top or bottom, the value
  /// of this variable controls how far from the parent's edge the progress
  /// indicator starts to appear. This may come in handy when, for example, the
  /// UI contains a top [Widget] which covers the parent's edge where the progress
  /// indicator would otherwise appear.
  ///
  /// By default, the edge offset is set to 0.
  ///
  /// See also:
  ///
  ///  * [displacement], can be used to change the distance from the edge that
  ///    the indicator settles.
  final double edgeOffset;

  /// A function that's called when the user has dragged the refresh indicator
  /// far enough to demonstrate that they want the app to refresh. The returned
  /// [Future] must complete when the refresh operation is finished.
  final RefreshCallback onRefresh;

  /// The progress indicator's foreground color. The current theme's
  /// [ColorScheme.primary] by default.
  final Color? color;

  /// The progress indicator's background color. The current theme's
  /// [ThemeData.canvasColor] by default.
  final Color? backgroundColor;

  /// A check that specifies whether a [ScrollNotification] should be
  /// handled by this widget.
  ///
  /// By default, checks whether `notification.depth == 0`. Set it to something
  /// else for more complicated layouts.
  final ScrollNotificationPredicate notificationPredicate;

  /// {@macro flutter.progress_indicator.ProgressIndicator.semanticsLabel}
  ///
  /// This will be defaulted to [MaterialLocalizations.Refreshv2SemanticLabel]
  /// if it is null.
  final String? semanticsLabel;

  /// {@macro flutter.progress_indicator.ProgressIndicator.semanticsValue}
  final String? semanticsValue;

  /// Defines [strokeWidth] for `Refreshv2`.
  ///
  /// By default, the value of [strokeWidth] is 2.0 pixels.
  final double strokeWidth;

  final _IndicatorType _indicatorType;

  /// Defines how this [Refreshv2] can be triggered when users overscroll.
  ///
  /// The [Refreshv2] can be pulled out in two cases,
  /// 1, Keep dragging if the scrollable widget at the edge with zero scroll position
  ///    when the drag starts.
  /// 2, Keep dragging after overscroll occurs if the scrollable widget has
  ///    a non-zero scroll position when the drag starts.
  ///
  /// If this is [Refreshv2TriggerMode.anywhere], both of the cases above can be triggered.
  ///
  /// If this is [Refreshv2TriggerMode.onEdge], only case 1 can be triggered.
  ///
  /// Defaults to [Refreshv2TriggerMode.onEdge].
  final Refreshv2TriggerMode triggerMode;

  @override
  Refreshv2State createState() => Refreshv2State();
}

/// Contains the state for a [Refreshv2]. This class can be used to
/// programmatically show the refresh indicator, see the [show] method.
class Refreshv2State extends State<Refreshv2> with TickerProviderStateMixin<Refreshv2> {
  late AnimationController _positionController;
  late AnimationController _scaleController;
  late Animation<double> _positionFactor;
  late Animation<double> _scaleFactor;
  late Animation<double> _value;
  late Animation<Color?> _valueColor;

  _Refreshv2Mode? _mode;
  late Future<void> _pendingRefreshFuture;
  bool? _isIndicatorAtTop;
  double? _dragOffset;

  static final Animatable<double> _threeQuarterTween = Tween<double>(begin: 0.0, end: 0.75);
  static final Animatable<double> _kDragSizeFactorLimitTween = Tween<double>(begin: 0.0, end: _kDragSizeFactorLimit);
  static final Animatable<double> _oneToZeroTween = Tween<double>(begin: 1.0, end: 0.0);

  @override
  void initState() {
    super.initState();
    _positionController = AnimationController(vsync: this);
    _positionFactor = _positionController.drive(_kDragSizeFactorLimitTween);
    _value =
        _positionController.drive(_threeQuarterTween); // The "value" of the circular progress indicator during a drag.

    _scaleController = AnimationController(vsync: this);
    _scaleFactor = _scaleController.drive(_oneToZeroTween);
  }

  @override
  void didChangeDependencies() {
    final ThemeData theme = Theme.of(context);
    _valueColor = _positionController.drive(
      ColorTween(
        begin: (widget.color ?? theme.colorScheme.primary).withOpacity(0.0),
        end: (widget.color ?? theme.colorScheme.primary).withOpacity(1.0),
      ).chain(CurveTween(
        curve: const Interval(0.0, 1.0 / _kDragSizeFactorLimit),
      )),
    );
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(covariant Refreshv2 oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.color != widget.color) {
      final ThemeData theme = Theme.of(context);
      _valueColor = _positionController.drive(
        ColorTween(
          begin: (widget.color ?? theme.colorScheme.primary).withOpacity(0.0),
          end: (widget.color ?? theme.colorScheme.primary).withOpacity(1.0),
        ).chain(CurveTween(
          curve: const Interval(0.0, 1.0 / _kDragSizeFactorLimit),
        )),
      );
    }
  }

  @override
  void dispose() {
    _positionController.dispose();
    _scaleController.dispose();
    super.dispose();
  }

  bool _shouldStart(ScrollNotification notification) {
    // If the notification.dragDetails is null, this scroll is not triggered by
    // user dragging. It may be a result of ScrollController.jumpTo or ballistic scroll.
    // In this case, we don't want to trigger the refresh indicator.
    return ((notification is ScrollStartNotification && notification.dragDetails != null) ||
            (notification is ScrollUpdateNotification &&
                notification.dragDetails != null &&
                widget.triggerMode == Refreshv2TriggerMode.anywhere)) &&
        ((notification.metrics.axisDirection == AxisDirection.up && notification.metrics.extentAfter == 0.0) ||
            (notification.metrics.axisDirection == AxisDirection.down && notification.metrics.extentBefore == 0.0)) &&
        _mode == null &&
        _start(notification.metrics.axisDirection);
  }

  bool _handleScrollNotification(ScrollNotification notification) {
    if (!widget.notificationPredicate(notification)) {
      return false;
    }
    if (_shouldStart(notification)) {
      setState(() {
        _mode = _Refreshv2Mode.drag;
      });
      return false;
    }
    bool? indicatorAtTopNow;
    switch (notification.metrics.axisDirection) {
      case AxisDirection.down:
      case AxisDirection.up:
        indicatorAtTopNow = true;
      case AxisDirection.left:
      case AxisDirection.right:
        indicatorAtTopNow = null;
    }
    if (indicatorAtTopNow != _isIndicatorAtTop) {
      if (_mode == _Refreshv2Mode.drag || _mode == _Refreshv2Mode.armed) {
        _dismiss(_Refreshv2Mode.canceled);
      }
    } else if (notification is ScrollUpdateNotification) {
      if (_mode == _Refreshv2Mode.drag || _mode == _Refreshv2Mode.armed) {
        if ((notification.metrics.axisDirection == AxisDirection.down && notification.metrics.extentBefore > 0.0) ||
            (notification.metrics.axisDirection == AxisDirection.up && notification.metrics.extentAfter > 0.0)) {
          _dismiss(_Refreshv2Mode.canceled);
        } else {
          if (notification.metrics.axisDirection == AxisDirection.down) {
            _dragOffset = _dragOffset! - notification.scrollDelta!;
          } else if (notification.metrics.axisDirection == AxisDirection.up) {
            _dragOffset = _dragOffset! + notification.scrollDelta!;
          }
          _checkDragOffset(notification.metrics.viewportDimension);
        }
      }
      if (_mode == _Refreshv2Mode.armed && notification.dragDetails == null) {
        // On iOS start the refresh when the Scrollable bounces back from the
        // overscroll (ScrollNotification indicating this don't have dragDetails
        // because the scroll activity is not directly triggered by a drag).
        _show();
      }
    } else if (notification is OverscrollNotification) {
      if (_mode == _Refreshv2Mode.drag || _mode == _Refreshv2Mode.armed) {
        if (notification.metrics.axisDirection == AxisDirection.down) {
          _dragOffset = _dragOffset! - notification.overscroll;
        } else if (notification.metrics.axisDirection == AxisDirection.up) {
          _dragOffset = _dragOffset! + notification.overscroll;
        }
        _checkDragOffset(notification.metrics.viewportDimension);
      }
    } else if (notification is ScrollEndNotification) {
      switch (_mode) {
        case _Refreshv2Mode.armed:
          _show();
        case _Refreshv2Mode.drag:
          _dismiss(_Refreshv2Mode.canceled);
        case _Refreshv2Mode.canceled:
        case _Refreshv2Mode.done:
        case _Refreshv2Mode.refresh:
        case _Refreshv2Mode.snap:
        case null:
          // do nothing
          break;
      }
    }
    return false;
  }

  bool _handleIndicatorNotification(OverscrollIndicatorNotification notification) {
    if (notification.depth != 0 || !notification.leading) {
      return false;
    }
    if (_mode == _Refreshv2Mode.drag) {
      notification.disallowIndicator();
      return true;
    }
    return false;
  }

  bool _start(AxisDirection direction) {
    assert(_mode == null);
    assert(_isIndicatorAtTop == null);
    assert(_dragOffset == null);
    switch (direction) {
      case AxisDirection.down:
      case AxisDirection.up:
        _isIndicatorAtTop = true;
      case AxisDirection.left:
      case AxisDirection.right:
        _isIndicatorAtTop = null;
        // we do not support horizontal scroll views.
        return false;
    }
    _dragOffset = 0.0;
    _scaleController.value = 0.0;
    _positionController.value = 0.0;
    return true;
  }

  void _checkDragOffset(double containerExtent) {
    assert(_mode == _Refreshv2Mode.drag || _mode == _Refreshv2Mode.armed);
    double newValue = _dragOffset! / (containerExtent * _kDragContainerExtentPercentage);
    if (_mode == _Refreshv2Mode.armed) {
      newValue = math.max(newValue, 1.0 / _kDragSizeFactorLimit);
    }
    _positionController.value = clampDouble(newValue, 0.0, 1.0); // this triggers various rebuilds
    if (_mode == _Refreshv2Mode.drag && _valueColor.value!.alpha == 0xFF) {
      _mode = _Refreshv2Mode.armed;
    }
  }

  // Stop showing the refresh indicator.
  Future<void> _dismiss(_Refreshv2Mode newMode) async {
    await Future<void>.value();
    // This can only be called from _show() when refreshing and
    // _handleScrollNotification in response to a ScrollEndNotification or
    // direction change.
    assert(newMode == _Refreshv2Mode.canceled || newMode == _Refreshv2Mode.done);
    setState(() {
      _mode = newMode;
    });
    switch (_mode!) {
      case _Refreshv2Mode.done:
        await _scaleController.animateTo(1.0, duration: _kIndicatorScaleDuration);
      case _Refreshv2Mode.canceled:
        await _positionController.animateTo(0.0, duration: _kIndicatorScaleDuration);
      case _Refreshv2Mode.armed:
      case _Refreshv2Mode.drag:
      case _Refreshv2Mode.refresh:
      case _Refreshv2Mode.snap:
        assert(false);
    }
    if (mounted && _mode == newMode) {
      _dragOffset = null;
      _isIndicatorAtTop = null;
      setState(() {
        _mode = null;
      });
    }
  }

  void _show() {
    assert(_mode != _Refreshv2Mode.refresh);
    assert(_mode != _Refreshv2Mode.snap);
    final Completer<void> completer = Completer<void>();
    _pendingRefreshFuture = completer.future;
    _mode = _Refreshv2Mode.snap;
    _positionController
        .animateTo(1.0 / _kDragSizeFactorLimit, duration: _kIndicatorSnapDuration)
        .then<void>((void value) {
      if (mounted && _mode == _Refreshv2Mode.snap) {
        setState(() {
          // Show the indeterminate progress indicator.
          _mode = _Refreshv2Mode.refresh;
        });

        final Future<void> refreshResult = widget.onRefresh();
        refreshResult.whenComplete(() {
          if (mounted && _mode == _Refreshv2Mode.refresh) {
            completer.complete();
            _dismiss(_Refreshv2Mode.done);
          }
        });
      }
    });
  }

  /// Show the refresh indicator and run the refresh callback as if it had
  /// been started interactively. If this method is called while the refresh
  /// callback is running, it quietly does nothing.
  ///
  /// Creating the [Refreshv2] with a [GlobalKey<Refreshv2State>]
  /// makes it possible to refer to the [Refreshv2State].
  ///
  /// The future returned from this method completes when the
  /// [Refreshv2.onRefresh] callback's future completes.
  ///
  /// If you await the future returned by this function from a [State], you
  /// should check that the state is still [mounted] before calling [setState].
  ///
  /// When initiated in this manner, the refresh indicator is independent of any
  /// actual scroll view. It defaults to showing the indicator at the top. To
  /// show it at the bottom, set `atTop` to false.
  Future<void> show({bool atTop = true}) {
    if (_mode != _Refreshv2Mode.refresh && _mode != _Refreshv2Mode.snap) {
      if (_mode == null) {
        _start(atTop ? AxisDirection.down : AxisDirection.up);
      }
      _show();
    }
    return _pendingRefreshFuture;
  }

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    final Widget child = NotificationListener<ScrollNotification>(
      onNotification: _handleScrollNotification,
      child: NotificationListener<OverscrollIndicatorNotification>(
        onNotification: _handleIndicatorNotification,
        child: widget.child,
      ),
    );
    assert(() {
      if (_mode == null) {
        assert(_dragOffset == null);
        assert(_isIndicatorAtTop == null);
      } else {
        assert(_dragOffset != null);
        assert(_isIndicatorAtTop != null);
      }
      return true;
    }());

    final bool showIndeterminateIndicator = _mode == _Refreshv2Mode.refresh || _mode == _Refreshv2Mode.done;

    return Stack(
      children: <Widget>[
        child,
        if (_mode != null)
          Positioned(
            top: _isIndicatorAtTop! ? widget.edgeOffset : null,
            bottom: !_isIndicatorAtTop! ? widget.edgeOffset : null,
            left: 0.0,
            right: 0.0,
            child: SizeTransition(
              axisAlignment: _isIndicatorAtTop! ? 1.0 : -1.0,
              sizeFactor: _positionFactor, // this is what brings it down
              child: Container(
                padding: _isIndicatorAtTop!
                    ? EdgeInsets.only(top: widget.displacement)
                    : EdgeInsets.only(bottom: widget.displacement),
                alignment: _isIndicatorAtTop! ? Alignment.topCenter : Alignment.bottomCenter,
                /*
              child: ScaleTransition(
                scale: _scaleFactor,
                child: AnimatedBuilder(
                  animation: _positionController,
                  builder: (BuildContext context, Widget? child) {
                    final Widget materialIndicator = RefreshProgressIndicator(
                      semanticsLabel: widget.semanticsLabel ?? MaterialLocalizations.of(context).Refreshv2SemanticLabel,
                      semanticsValue: widget.semanticsValue,
                      value: showIndeterminateIndicator ? null : _value.value,
                      valueColor: _valueColor,
                      backgroundColor: widget.backgroundColor,
                      strokeWidth: widget.strokeWidth,
                    );

                    final Widget cupertinoIndicator = CupertinoActivityIndicator(
                      color: widget.color,
                    );

                    switch (widget._indicatorType) {
                      case _IndicatorType.material:
                        return materialIndicator;

                      case _IndicatorType.adaptive: {
                        final ThemeData theme = Theme.of(context);
                        switch (theme.platform) {
                          case TargetPlatform.android:
                          case TargetPlatform.fuchsia:
                          case TargetPlatform.linux:
                          case TargetPlatform.windows:
                            return materialIndicator;
                          case TargetPlatform.iOS:
                          case TargetPlatform.macOS:
                            return cupertinoIndicator;
                        }
                      }
                    }
                  },
                ),
              ),
               */
              ),
            ),
          ),
      ],
    );
  }
}

common içerisinde bulunan small button kodları

Kod:
import 'package:flutter/material.dart';
import 'package:kooginapp/core/theme/pallete.dart';

class RoundedSmallButton extends StatelessWidget {
  final VoidCallback onTap;
  final String label;
  final Color backgroundColor;
  final Color textColor;
  const RoundedSmallButton(
      {super.key,
      required this.onTap,
      required this.label,
      this.backgroundColor = Pallete.blueColor,
      this.textColor = Pallete.whiteColor});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 35,
        child: ElevatedButton(
          onPressed: onTap,
          style: ElevatedButton.styleFrom(
            backgroundColor: Pallete.blueColor,
          ),
          child: Text(
            label,
            style: const TextStyle(color: Pallete.whiteColor, fontWeight: FontWeight.bold, fontSize: 16),
          ),
        ));
  }
}

common içerisindeki loading page kodları

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

class Loader extends StatelessWidget {
  const Loader({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }
}

class LoadingPage extends StatelessWidget {
  const LoadingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Loader(),
    );
  }
}

Loaderımız zaten hazırdı


export './rounded_small_button.dart';

export ediyoruz basitçe

notificationlar için bir enum oluşturuyoruz kolay olsun diye

Kod:
enum NotificationType {
  like('like'),
  reply('reply'),
  follow('follow'),
  repost('repost');

  final String type;
  const NotificationType(this.type);
}

extension ConvertPost on String {
  NotificationType toNotificationTypeEnum() {
    switch (this) {
      case 'repost':
        return NotificationType.repost;
      case 'follow':
        return NotificationType.follow;
      case 'reply':
        return NotificationType.reply;
      default:
        return NotificationType.like;
    }
  }
}

aynı enumı postlar için oluşturduk

Kod:
enum PostType {
  text('text'),
  image('image');

  final String type;
  const PostType(this.type);
}

extension ConvertPost on String {
  PostType toEnum() {
    switch (this) {
      case 'text':
        return PostType.text;
      case 'image':
        return PostType.image;
      default:
        return PostType.text;
    }
  }
}

riverpod kullandığımız için providerlarımız sıra sıra
appwrite client için storage için db için realtime postlar realtime kullanıcılar için ekliyoruz tek tek

Kod:
final appwriteClientProvider = Provider((ref) {
 
  Client client = Client();
  return client
      .setEndpoint(AppwriteConstants.endPoint)
      .setProject(AppwriteConstants.projectId)
      .setSelfSigned(status: true);
});

final appwriteClientProviderChat = Provider((ref) {
 
  Client client = Client();
  return client
      .setEndpoint(AppwriteConstants.endPoint)
      .setProject(AppwriteConstants.projectId)
      .setSelfSigned(status: true);
});


final appwriteAccountProvider = Provider(
  (ref) {
    final client = ref.watch(appwriteClientProvider);
    return Account(client);
  },
);


final appwriteDatabaseProvider = Provider((ref) {
  final client = ref.watch(appwriteClientProvider);
  return Databases(client);
});


final appWriteStorageProvider = Provider((ref) {
  final client = ref.watch(appwriteClientProvider);
  return Storage(client);
});

//! its for stream (to show realtime post thanks to the appwrite)

final appWriteRealTimeProvider = Provider((ref) {
  final client = ref.watch(appwriteClientProvider);
  return Realtime(client);
});

final appWriteRealTimeProviderForPosts = Provider((ref) {
  final client = ref.watch(appwriteClientProvider);
  return Realtime(client);
});

final appWriteRealTimeProviderForUsers = Provider((ref) {
  final client = ref.watch(appwriteClientProvider);
  return Realtime(client);
});

final appWriteRealTimeProviderForNotifications = Provider((ref) {
  final client = ref.watch(appwriteClientProvider);
  return Realtime(client);
});

benim kullandığım renkler böyle buradan çekiyorum

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

class Pallete {
  static const Color backgroundColor = Colors.black;
  static const Color searchBarColor = Color.fromRGBO(32, 35, 39, 1);
  static const Color blueColor = Color.fromRGBO(29, 155, 240, 1);
  static const Color whiteColor = Colors.white;
  static const Color greyColor = Colors.grey;
  static const Color blackColor = Colors.black;
  static const Color redColor = Color.fromRGBO(249, 25, 127, 1);
  static const Color nightRightMessageColor = Color.fromRGBO(32, 35, 39, 1);
  static const Color nightLeftMessageColor = Color.fromRGBO(179, 21, 92, 1);
  static const Color brightRightMessageColor = Color.fromRGBO(236, 229, 221, 1);
  static const Color brightLeftMessageColor = Color.fromRGBO(220, 248, 198, 1);
}

fpdart package için kullandığım typedefler

Kod:
import 'package:fpdart/fpdart.dart';

import 'error/failure.dart';

typedef FutureEither<T> = Future<Either<Failure, T>>;
typedef FutureEitherVoid = FutureEither<void>;

main.dart kodlarım ve signup login stateini nasıl yönlendirdiğim:

Kod:
void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appThemeState = ref.watch(appThemeStateNotifier);
    return MaterialApp(
      title: AppTexts.twitter,
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      themeMode: appThemeState.isDarkModeEnabled ? ThemeMode.dark : ThemeMode.light,
      debugShowCheckedModeBanner: false,
      home: ref.watch(currentUserAccountProvider).when(
            data: (user) {
              if (user != null) {
                return const HomeView();
              }
              return const SignUpView();
            },
            error: (error, st) {
              return ErrorPage(error: error.toString());
            },
            loading: () => const LoadingPage(),
          ),
    );
  }
}

yaptığımız işlemler diğerlerinin aynısı olduğu için artık isimleri değiştirip yazıyoruz kolaylık olsun diye fpdart package kullandık ve enumlarla typedeflerle çalışmayı es geçmedik.

flutter%20twitter%20clone%20appwriite%20riverpod%20thumbnail.png

Sonuç olarak bu projeyi hatalarıyla birlikte bitirmiş olduk seriyi baştan sona okuyup anlamayan varsa bu konu özelinde sorulara açığım. Sonuç olarak appwrite'ı realtime işlemler ve chatleşme için tavsiye etmiyorum ama güzel projeler çıkartılabilir.

kullanılanlar:​
cupertino_icons: ^1.0.2
appwrite: ^12.0.1
flutter_svg: ^2.0.10+1
flutter_riverpod: ^2.5.1
fpdart: ^1.1.0
image_picker: ^1.0.7
carousel_slider: ^4.2.1
timeago: ^3.6.1
any_link_preview: ^3.0.1
like_button: ^2.0.5

Kurulum​

Dockerı kur rivaan ın videodan hallet bunları ayarlar sırasıyla şöyle:

Appwrite'ı yükle
Appwrite lokalde proje oluştur
Android & iOS
Appwrite db oluştur storage oluştur
Auth, db ve storage izin ayarları
Tweets, Users, Notifications Collection'lar için attributeları ayarlamanız lazım ilk konuda bahsettiğim videoda mevcut.
lib/constants/appwrite_constants.dart idleri falan hepsini appwrite dan alıp projenize yazacaksınız bu dosyaya
ip adresinizi değiştirmeyi unutmayın burdaki lib/constants/appwrite_constants.dart

Tech Stack:
Server: Appwrite Auth, Appwrite Storage, Appwrite Database, Appwrite Realtime
Client: Flutter, Riverpod

 
Son düzenleme:
Geri
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.