Zenon  Pruschke

Zenon Pruschke

1660375692

So kreisen Sie Clip-Bilder in der Flutter-App ein

Dieses Tutorial zeigt einige Möglichkeiten, wie Sie Clip-Bilder (und mehr) in Ihrer Flutter-App einkreisen können

Das Beschneiden von Bildern kann mehr Flexibilität in Bezug auf den in der Benutzeroberfläche belegten Platz, die Bildattraktivität und den Stil ermöglichen. Durch das Beschneiden können Sie auch unnötige Teile eines Bildes entfernen, um Benutzern zu helfen, sich auf einen Punkt von Interesse zu konzentrieren.

Beispielsweise ist es üblich, Ihr Profilbild auf Social-Media-Plattformen in einem kreisförmigen Layout zu sehen. Liegt das daran, dass Sie ein kreisförmiges Foto hochgeladen haben? Meistens nein. Sie laden einfach ein beliebiges Foto hoch und der Ausschnitt wird für Sie erledigt, wodurch der Platz, den Ihr Profilbild auf der Website einnimmt, reduziert wird. Dies ist besonders wichtig für mobile Apps.

In diesem Beitrag werde ich die wenigen Möglichkeiten behandeln, wie Sie Clip-Bilder (und mehr) in Ihrer Flutter-App einkreisen können. Bevor wir unser erstes Widget zum Ausschneiden von Bildern verwenden, richten wir unsere App ein und erhalten ein tatsächliches Bild zur Verwendung.

Einrichten der Flutter-App

Erstellen Sie eine App mit flutter create circle_clipper_demo.

Verwenden Sie in Ihrem Widget- Text builddas SingleChildScrollViewWidget. childVerwenden Sie für die Eigenschaft dieses Widgets das ColumnWidget und geben Sie ihm eine zentrierte Ausrichtung. Verwenden Sie für das Column'sKind eine WidgetListe, die ein TextWidget und ein CenterWidget enthält. Siehe unten.

SingleChildScrollView(
       child: Column(      
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           const Text(
             "Hi! I'm Pizza!",
             style: TextStyle(fontSize: 25),
           ),
           Center(
             child: /// widget for picture,
           ),
         ],
       ),
     ),

Als nächstes müssen wir das für unser Bild verwendete Widget hinzufügen. Dazu können wir ein ImageWidget verwenden.

const Image(image: AssetImage('./assets/pic.png'));

Jetzt müssen wir nur noch ein Assets-Verzeichnis im Stammverzeichnis unseres Projekts erstellen und ein Bild finden, das wir verwenden können. Ich habe ein Bild von ClipArtMax . Wenn Sie das Verzeichnis erstellen und das Bild hinzufügen, müssen Sie Ihr neues Asset in Ihrer pubspec.yaml.

# To add assets to your application, add an assets section like this:
 assets:
   - assets/

Führen Sie dies flutter pub getaus, um sicherzustellen, dass Ihre pubspec.yamlÄnderungen übernommen werden, und sehen Sie sich dann an, wie unsere App vor dem Beschneiden aussieht.

Nachdem wir unsere App eingerichtet haben, schauen wir uns an, wie wir unser Bild mithilfe von ausschneiden können ClipRRect.

Verwendung ClipRRectin Flutter zum Ausschneiden von Kreisen

ClipRRectist ein Widget, das speziell zum Beschneiden seines untergeordneten Elements mit einer von Natur aus abgerundeten rechteckigen Form verwendet wird. Wir können diesen verwenden, um einen kreisförmigen Ausschnitt um unser Bild zu erstellen. Es ist relativ einfach zu implementieren, da es unser ursprüngliches ImageWidget im Wesentlichen umschließt und einen Randradius darauf anwendet.

ClipRRect(
     borderRadius: BorderRadius.circular(300.0),
     child: const Image(image: AssetImage('./assets/pic.png')),
   );

Wir verwenden das gleiche Original Image-Widget, aber wir wickeln es ein ClipRRectund wenden einen Randradius an, um den bereitgestellten Ausschnitt abzurunden. Siehe die beiden Bilder im Vergleich unten.

Beachten Sie, dass unser Bild auf der rechten Seite eine runde Kante hat, die einen Teil unseres Originalbildes abschneidet (oder abschneidet). Sie können auch den Grad der Beschneidung variieren, indem Sie den Randradiuswert ändern. Je größer der Radius, desto kreisförmiger ist es. Einfach, nein?

Lassen Sie uns die nächste Möglichkeit behandeln, wie wir unsere Bilder kreisen können. Wir können ein Widget verwenden, das es uns nicht nur ermöglicht, den Clip einfach zu umkreisen, sondern auch unserem beschnittenen Bild eine Hintergrundfarbe zuzuweisen (vorausgesetzt, Ihr Bild hat den Hintergrund entfernt). Dieses Widget heißt CircleAvatar.

Verwendung CircleAvatarzum Ausschneiden von Bildern in Flutter

CircleAvatarist ein von Material bereitgestelltes Widget. Es ist ein Kreis, der einen Benutzer darstellt. Ich finde es besonders nützlich, weil es so einfach zu implementieren ist wie ClipRRect, aber es ermöglicht auch ein einfaches backgroundColorHinzufügen zu Ihrem Bild.


CircleAvatar(
         backgroundColor: Colors.amber,
         backgroundImage: AssetImage('./assets/pic.png'),
         radius: 200.0
);

Es ähnelt ClipRRectin dem Sinne, dass es radius(aufgerufen borderRadiusin ClipRRect) verwendet, um den Grad der Zirkularität zu bestimmen, der auf ein beschnittenes Bild angewendet wird. Es ist jedoch wichtig darauf hinzuweisen, dass Sie, wenn Sie möchten, dass Ihr Bild korrekt zugeschnitten wird, es der backgroundImageEigenschaft zuweisen müssen und nicht child. Wenn Sie es auf anwenden childwürden, würde das Bild aus dem Ausschnitt herausbrechen. Sehen wir uns diese beiden Beispiele unten an.

Ich mag dieses Widget, weil es ähnlich wie funktioniert ClipRRect, Flexibilität für die Hintergrundfarbe bietet und Sie ein hinzufügen können, childwenn Sie neben dem Bild noch etwas hinzufügen möchten (z. B. ein Abzeichen oder ein „Online“-Licht), das in einer separaten Eigenschaft von aufbewahrt wird das Bild selbst (anstatt eine WidgetListe festzulegen, die zugewiesen werden soll child). In Bezug auf die Syntax denke ich, dass es sauberer ist.

Beispielsweise können Sie AssetImageanstelle AssetImageeines ImageWidgets ein Wrapper verwenden. Außerdem radiusist es nur ein Double, anstatt eine Eigenschaft von sein zu müssen BorderRadius. Es gibt mehr Flexibilität mit clipBehaviorfor ClipRRect, aber für schnelles Ausschneiden von Kreisen (etwas, das beispielsweise für einen Social-Media-Avatar praktisch ist) gefällt mir CircleAvatar.

Wenn Sie jedoch einen Ausschnitt wünschen, der eher einem Oval als einem Kreis entspricht, ist dieses nächste Widget perfekt für Sie.

Erstellen von Ovalen in Flutter mitClipOval

ClipOvalist ein Widget, das das Kind in die Form eines Ovals schneidet. Es ist sehr einfach zu verwenden, wenn Sie ein Ovular-Clipping benötigen. Siehe unten.

ClipOval(
         child: Image(image: AssetImage('./assets/pic.png'))
);

Es ist sehr ähnlich, ClipRRectohne eine borderRadiusEigenschaft hinzufügen zu müssen.

Was ist, wenn Sie keinen kreisförmigen oder ovalen Beschneidungspfad möchten und stattdessen Ihr Bild als regelmäßiges Rechteck beschneiden möchten? Dazu können Sie verwenden ClipRect.

Wird ClipRectzum Ausschneiden von Rechtecken in Flutter verwendet

ClipRectkann man sich vorstellen wie ClipRRect, minus den abgerundeten Teil (daher fehlt das zweite „R“). Es wendet einen rechteckigen Beschneidungspfad auf ein untergeordnetes Widget an, ohne von Natur aus abgerundete Kanten anzuwenden. Es ist großartig, wenn es mit anderen Widgets verwendet wird, die dazu neigen, außerhalb ihrer Grenzen zu malen, wie z Align. Siehe unten.

ClipRect(
         child: Align(
           alignment: Alignment.center,
           widthFactor: 0.8,
           heightFactor: 1.0,
           child: Image(
             image: AssetImage('./assets/pic.png')
           ),
       ),
     );

Hier verwenden wir Align, um unser Bild zentriert zu halten und den widthFactorauf weniger als eins einzustellen. Sehen Sie den Vergleich mit unserem Originalbild unten.

Indem wir es in unseren Clipper einwickeln, können wir einen rechteckigen Clipping-Effekt für unser Bild erzeugen. Sie können die Clipping-Stufe anpassen, indem Sie das widthFactorauf dem untergeordneten Element ändern Align.

Wir haben Kreis-Clipping mit ClipRRectund CircleAvatarsowie Oval-Clipping und Rechteck-Clipping mit behandelt ClipRect. Aber welche anderen Formen können wir ausschneiden, und was ist, wenn wir eine individuellere Form zum Ausschneiden unseres Bildes erstellen möchten? Mit unserem letzten Widget des Beitrags können wir genau das tun.

ClipPathim Flutter

ClipPathist ein Widget, mit dem der Entwickler seine Schnittform (oder seinen Pfad) an den beabsichtigten Effekt anpassen kann. Siehe Startcode unten.

ClipPath(
         clipper: MyTriangle(),
         child: const Image(image: AssetImage('./assets/pic.png')),
     );

Die Struktur ähnelt unseren anderen Clipping-Widgets, aber wir verwenden eine wichtige Eigenschaft namens clipper.

Lassen Sie uns versuchen, in Form eines Dreiecks zu schneiden. Wir können dies tun, indem wir unser eigenes Clipping-Widget erstellen, das die CustomClipperKlasse erweitert. In unserem neuen Clipping-Widget – nennen wir es MyTriangle– können wir zwei Funktionen definieren.

Die erste ist getClip, die immer dann aufgerufen wird, wenn der benutzerdefinierte Clip aktualisiert werden muss, z. B. wenn unser ClipPathWidget zum ersten Mal mit unserem Bild gerendert wird. shouldReclipwird aufgerufen, wenn eine neue Instanz der Clipper-Klasse bereitgestellt wird. Im Moment gibt diese Funktion nur zurück false.

Unser getClipist jedoch das Fleisch und die Kartoffeln unseres benutzerdefinierten Ausschnitts.

Path getClip(Size size) {
     final path = Path();
     path.moveTo(size.width/2, 0.0);
     path.lineTo(size.width, size.height);
     path.lineTo(0.0, size.height);
     path.close();
     return path;
 }

Hier tut sich einiges. Zuerst instanziieren wir die PathKlasse. Sie können sich diese Klasse als eine Linie vorstellen, die von Punkt A auf die Benutzeroberfläche gezogen wird, und Sie können sie mithilfe integrierter Methoden ( moveTound lineTo) zu Punkt B, zu Punkt C, zu Punkt D usw. verschieben .

Wenn Sie fertig sind, können Sie den Pfad schließen ( close), wodurch er zum Ausgangspunkt zurückkehrt. Die Funktion nimmt eine inhärente SizeInstanz als Argument, die zwei Eigenschaften hat, widthund height.

Bild aus den Flutter -Dokumenten .

moveTound lineToerstellen Sie sogenannte Unterpfade. moveTobeginnt einen neuen Teilpfad an einem gegebenen Satz von Koordinaten (deshalb steht er in unserem Fall an erster Stelle) und moveTofügt ein gerades Liniensegment vom aktuellen Punkt zu einem neu bereitgestellten Punkt hinzu. Hier ist die Reihenfolge der Operationen für unsere Koordinaten.

  1. Die erste bereitgestellte X-Koordinate liegt size.width/2daran, dass uns dies den halben Punkt der Breite (oder horizontalen Mitte) des Bildes gibt. Die Y-Koordinate liegt 0.0daran, dass sie sich oben in unserem Bild befindet. Zusammen beginnen wir damit in der oberen Mitte unseres Bildes – der ersten Ecke unseres Dreiecks
  2. Die zweite X-Koordinate liegt size.widthdaran, dass dies der Punkt ganz rechts für unser Bild ist. Die Y-Koordinate liegt size.heightdaran, dass sie sich am unteren Rand des Bildes befindet. Zusammen ergibt dies die untere rechte Ecke unseres Bildes, den zweiten Punkt auf dem Dreieck
  3. Die dritte X-Koordinate liegt einfach 0.0 daran, dass sie der linkeste Teil unseres Bildes ist (horizontal). Die Y-Koordinate ist immer noch size.height, weil wir nicht wollen, dass sich unser Pfad noch nach oben oder unten bewegt. Indem wir ihn auf der Höhe unseres Bildes halten, erzeugt der gezeichnete Pfad die untere Seite unseres Dreiecks – und die Konvergenz unserer letzten Koordinaten bildet die dritte und letzte Ecke unseres Dreiecks
  4. closeerstellt einen letzten Unterpfad zwischen unserem letzten Punkt ( 0.0, size.height) und unserem ersten Punkt ( size.width/2, 0.0).

Jetzt müssen wir nur noch an MyTriangledie Clipper-Eigenschaft für unser ClipPathWidget übergeben. Wir sollten das folgende Ergebnis erhalten.

Sie können verwenden ClipPath, um jede Art von seltsamen und wilden Formen zu erstellen, die Sie sich vorstellen können, indem Sie einfach verschiedene Koordinaten für beliebig viele lineToFunktionen einfügen, die Sie ausführen möchten. Sie können den Code für dieses Projekt von GitHub klonen und selbst mit diesen Clipping-Widgets experimentieren! Danke fürs Lesen!

Quelle des Originalartikels unter https://blog.logrocket.com

#flutter

What is GEEK

Buddha Community

So kreisen Sie Clip-Bilder in der Flutter-App ein

Google's Flutter 1.20 stable announced with new features - Navoki

Flutter Google cross-platform UI framework has released a new version 1.20 stable.

Flutter is Google’s UI framework to make apps for Android, iOS, Web, Windows, Mac, Linux, and Fuchsia OS. Since the last 2 years, the flutter Framework has already achieved popularity among mobile developers to develop Android and iOS apps. In the last few releases, Flutter also added the support of making web applications and desktop applications.

Last month they introduced the support of the Linux desktop app that can be distributed through Canonical Snap Store(Snapcraft), this enables the developers to publish there Linux desktop app for their users and publish on Snap Store.  If you want to learn how to Publish Flutter Desktop app in Snap Store that here is the tutorial.

Flutter 1.20 Framework is built on Google’s made Dart programming language that is a cross-platform language providing native performance, new UI widgets, and other more features for the developer usage.

Here are the few key points of this release:

Performance improvements for Flutter and Dart

In this release, they have got multiple performance improvements in the Dart language itself. A new improvement is to reduce the app size in the release versions of the app. Another performance improvement is to reduce junk in the display of app animation by using the warm-up phase.

sksl_warm-up

If your app is junk information during the first run then the Skia Shading Language shader provides for pre-compilation as part of your app’s build. This can speed it up by more than 2x.

Added a better support of mouse cursors for web and desktop flutter app,. Now many widgets will show cursor on top of them or you can specify the type of supported cursor you want.

Autofill for mobile text fields

Autofill was already supported in native applications now its been added to the Flutter SDK. Now prefilled information stored by your OS can be used for autofill in the application. This feature will be available soon on the flutter web.

flutter_autofill

A new widget for interaction

InteractiveViewer is a new widget design for common interactions in your app like pan, zoom drag and drop for resizing the widget. Informations on this you can check more on this API documentation where you can try this widget on the DartPad. In this release, drag-drop has more features added like you can know precisely where the drop happened and get the position.

Updated Material Slider, RangeSlider, TimePicker, and DatePicker

In this new release, there are many pre-existing widgets that were updated to match the latest material guidelines, these updates include better interaction with Slider and RangeSliderDatePicker with support for date range and time picker with the new style.

flutter_DatePicker

New pubspec.yaml format

Other than these widget updates there is some update within the project also like in pubspec.yaml file format. If you are a flutter plugin publisher then your old pubspec.yaml  is no longer supported to publish a plugin as the older format does not specify for which platform plugin you are making. All existing plugin will continue to work with flutter apps but you should make a plugin update as soon as possible.

Preview of embedded Dart DevTools in Visual Studio Code

Visual Studio code flutter extension got an update in this release. You get a preview of new features where you can analyze that Dev tools in your coding workspace. Enable this feature in your vs code by _dart.previewEmbeddedDevTools_setting. Dart DevTools menu you can choose your favorite page embed on your code workspace.

Network tracking

The updated the Dev tools comes with the network page that enables network profiling. You can track the timings and other information like status and content type of your** network calls** within your app. You can also monitor gRPC traffic.

Generate type-safe platform channels for platform interop

Pigeon is a command-line tool that will generate types of safe platform channels without adding additional dependencies. With this instead of manually matching method strings on platform channel and serializing arguments, you can invoke native class and pass nonprimitive data objects by directly calling the Dartmethod.

There is still a long list of updates in the new version of Flutter 1.2 that we cannot cover in this blog. You can get more details you can visit the official site to know more. Also, you can subscribe to the Navoki newsletter to get updates on these features and upcoming new updates and lessons. In upcoming new versions, we might see more new features and improvements.

You can get more free Flutter tutorials you can follow these courses:

#dart #developers #flutter #app developed #dart devtools in visual studio code #firebase local emulator suite in flutter #flutter autofill #flutter date picker #flutter desktop linux app build and publish on snapcraft store #flutter pigeon #flutter range slider #flutter slider #flutter time picker #flutter tutorial #flutter widget #google flutter #linux #navoki #pubspec format #setup flutter desktop on windows

Idrish Dhankot

Idrish Dhankot

1622532470

Hire Dedicated Flutter App Developer USA| Flutter App Developers

Hire Flutter App Developers: WebClues Infotech is a Flutter App Development company. Our Flutter mobile app development team can create cross-platform apps for different industry verticals. Our Flutter developers will help you extend your business’s scope by developing enhanced functionality and a feature-rich app. To provide a rich user experience to your users, hire dedicated Flutter app developers from WebClues Infotech today!

#hire flutter app developers #hire dedicated flutter app developer usa #hire flutter app developer usa #hire dedicated flutter app developer #hire flutter developer #flutter app development company

Best Flutter App Development Company

Are you looking for the best flutter app development company? Then AppClues Infotech is the leading flutter app development company in USA offering the best service worldwide. We focused on developing hybrid mobile apps on Android & iOS and assures our end-user about exceptional and functionally-rich mobile apps.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top flutter app development company in usa #best flutter app development service #best flutter app development company #hire flutter app developers #flutter app development company #expert flutter app development company

Best Flutter App Development Company in USA & India

AppClues Infotech is one of the best flutter app development company in USA & India. Our diverse and experienced team of developers can help you sketch the smartest and quickest solution for your mobile app development projects with the most superior technology.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top flutter app development company in usa #best flutter app development service #best flutter app development company #hire flutter app developers #flutter app development company in usa & india #custom flutter app development service

Punith Raaj

1644991598

The Ultimate Guide To Tik Tok Clone App With Firebase - Ep 2

The Ultimate Guide To Tik Tok Clone App With Firebase - Ep 2
In this video, I'm going to show you how to make a Cool Tik Tok App a new Instagram using Flutter,firebase and visual studio code.

In this tutorial, you will learn how to Upload a Profile Pic to Firestore Data Storage.

🚀 Nice, clean and modern TikTok Clone #App #UI made in #Flutter⚠️

Starter Project : https://github.com/Punithraaj/Flutter_Tik_Tok_Clone_App/tree/Episode1

► Timestamps 
0:00 Intro 0:20 
Upload Profile Screen 
16:35 Image Picker
20:06 Image Cropper 
24:25 Firestore Data Storage Configuration.

⚠️ IMPORTANT: If you want to learn, I strongly advise you to watch the video at a slow speed and try to follow the code and understand what is done, without having to copy the code, and then download it from GitHub.

► Social Media 
GitHub: https://github.com/Punithraaj/Flutter_Tik_Tok_Clone_App.git
LinkedIn: https://www.linkedin.com/in/roaring-r...
Twitter: https://twitter.com/roaringraaj
Facebook: https://www.facebook.com/flutterdartacademy

► Previous Episode : https://youtu.be/QnL3fr-XpC4
► Playlist: https://youtube.com/playlist?list=PL6vcAuTKAaYe_9KQRsxTsFFSx78g1OluK

I hope you liked it, and don't forget to like,comment, subscribe, share this video with your friends, and star the repository on GitHub!
⭐️ Thanks for watching the video and for more updates don't forget to click on the notification. 
⭐️Please comment your suggestion for my improvement. 
⭐️Remember to like, subscribe, share this video, and star the repo on Github :)

Hope you enjoyed this video!
If you loved it, you can Buy me a coffee : https://www.buymeacoffee.com/roaringraaj

LIKE & SHARE & ACTIVATE THE BELL Thanks For Watching :-)
 
https://youtu.be/F_GgZVD4sDk

#flutter tutorial - tiktok clone with firebase #flutter challenge @tiktokclone #fluttertutorial firebase #flutter firebase #flutter pageview #morioh #flutter