Create a "Flutter for Jetpack Compose developers" page #11232

jwill · 2024-10-05T03:44:23Z

Description of what this PR is changing or adding, and why:

Adds a page for Flutter for Jetpack Compose devs.

Issues fixed by this PR (if any):

Fixes #5611 and #9051

PRs or commits this PR depends on (if any):

Presubmit checklist

This PR is marked as draft with an explanation if not meant to land until a future stable release.
This PR doesn’t contain automatically generated corrections (Grammarly or similar).
This PR follows the Google Developer Documentation Style Guidelines — for example, it doesn’t use i.e. or e.g., and it avoids I and we (first person).
This PR uses semantic line breaks of 80 characters or fewer.

added links from the legacy android page to compose version

flutter-website-bot · 2024-10-05T03:48:42Z

Visit the preview URL for this PR (updated for commit c86364b):

https://flutter-docs-prod--pr11232-for-compose-devs-gfdg478a.web.app

sfshaza2 · 2024-10-09T22:14:12Z

I'm confused. How does this overlap with this: #11219 ?

jwill · 2024-10-09T22:22:40Z

I'm confused. How does this overlap with this: #11219 ?

#11219 is a targeted flow for an add to app like thing for Flutter developers that need to add a Compose activity.

This PR is speaking more to Compose developers who want to implement flutter and see how their knowledge transfers.

There is minimal overlap.

sfshaza2

Hi @jwill! Thanks for writing this! It's a great start.

My primary issue is the focus here should be on how to use Flutter, not how to program better in Compose. ;) I don't think we need so many Kotlin examples.

sfshaza2 · 2024-10-08T18:25:09Z

src/content/get-started/flutter-for/compose-devs.md

+If you instead have experience building apps for Android with Views (XML),
+see [Flutter for Android developers][].


Suggested change

If you instead have experience building apps for Android with Views (XML),

see [Flutter for Android developers][].

If you have experience building Android apps with Views (XML),

check out [Flutter for Android developers][].

sfshaza2 · 2024-10-08T18:32:53Z

src/content/get-started/flutter-for/android-devs.md

@@ -2378,7 +2384,7 @@ In Flutter, access this functionality using the
 For more information on using the Firebase Cloud Messaging API,
 see the [`firebase_messaging`][] plugin documentation.

-
+[Flutter for Jetpack Compose devs]: /flutter-for/compose-devs


Also, please update the src/_data/sidenav to include this file. Also, modify the title of the original page. Perhaps "Flutter for Android devs using View" ??? Then this page can be "Flutter for Android devs using Jetpack Compose".

sfshaza2 · 2024-10-11T16:14:54Z

src/content/get-started/flutter-for/android-devs.md

@@ -11,6 +11,12 @@ If you understand the fundamentals of the Android framework then you
 can use this document as a jump start to Flutter development.

 :::note
+Android has two native user interface systems, Views (XML based) and Jetpack Compose.
+Some fundamentals are shared so this document will provide value no matter what. 
+Howeverm if you are coming from Jetpack Compose, 


Suggested change

Howeverm if you are coming from Jetpack Compose,

However, if you are coming from Jetpack Compose,

sfshaza2 · 2024-10-11T16:15:48Z

src/content/get-started/flutter-for/android-devs.md

+Android has two native user interface systems, Views (XML based) and Jetpack Compose.
+Some fundamentals are shared so this document will provide value no matter what. 
+Howeverm if you are coming from Jetpack Compose, 
+see [Flutter for Jetpack Compose devs][] for more information about Jetpack Compose


Suggested change

see [Flutter for Jetpack Compose devs][] for more information about Jetpack Compose

check out [Flutter for Jetpack Compose devs][] for detailed information about Jetpack Compose

sfshaza2 · 2024-10-11T16:17:20Z

src/content/get-started/flutter-for/compose-devs.md

+check out [Add Flutter to existing app][].
+:::
+
+This document can be used as a cookbook by jumping around


Suggested change

This document can be used as a cookbook by jumping around

This document can be used as a reference by jumping around

A cookbook is typically sequential in nature.

sfshaza2 · 2024-10-11T16:59:59Z

src/content/get-started/flutter-for/compose-devs.md

+### Styling text
+
+In **Compose**, you use the properties on `Text` for one or two
+attributes or construct `TextStyle` object to set many at once.


Suggested change

attributes or construct `TextStyle` object to set many at once.

attributes or construct a `TextStyle` object to set many at once.

sfshaza2 · 2024-10-11T17:00:34Z

src/content/get-started/flutter-for/compose-devs.md

+### Styling buttons
+
+In **Compose**, you modify the colors of a button using 
+the `colors` property. If left unmodified, they will


Suggested change

the `colors` property. If left unmodified, they will

the `colors` property. If left unmodified, they

sfshaza2 · 2024-10-11T17:01:25Z

src/content/get-started/flutter-for/compose-devs.md

+You can then modify properties on composables that have related
+properties or accept a `TextStyle`.
+
+```kotlin
+// Font files bunded with app
+val firaSansFamily = FontFamily(
+   Font(R.font.firasans_light, FontWeight.Light),
+   Font(R.font.firasans_regular, FontWeight.Normal),
+   Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
+   Font(R.font.firasans_medium, FontWeight.Medium),
+   Font(R.font.firasans_bold, FontWeight.Bold)
+)


I'd delete this. Not a Compose tutorial.

sfshaza2 · 2024-10-11T17:02:19Z

src/content/get-started/flutter-for/compose-devs.md

+)
+
+val bodyFontFamily = FontFamily(
+    Font(
+        googleFont = GoogleFont("Acme"),
+        fontProvider = provider,
+    )
+)
+
+val displayFontFamily = FontFamily(
+    Font(
+        googleFont = GoogleFont("Aboreto"),
+        fontProvider = provider,
+    )
+)
+
+// Usage
+Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
+Text(text = "text", fontFamily = bodyFontFamily, fontWeight = FontWeight.Medium)


More delete-y.

sfshaza2 · 2024-10-11T17:03:50Z

src/content/get-started/flutter-for/compose-devs.md

+```
+
+:::note
+To download custom fonts to use in your apps,


Do you mean "custom" fonts? I think you mean "other Google fonts".

jwill · 2024-10-11T20:40:21Z

Hi @jwill! Thanks for writing this! It's a great start.

My primary issue is the focus here should be on how to use Flutter, not how to program better in Compose. ;) I don't think we need so many Kotlin examples.

I actually cut down on the number of examples from the page I modeled it on, Flutter for SwiftUI devs (https://docs.flutter.dev/get-started/flutter-for/swiftui-devs). There are sections on animation and there concepts in that other page that didn't feel essential and were getting into the weeds.

My goal here was targeting a developer who is conversant with Compose and wants to do Flutter. I think it's important to discuss the commonalities to allow them to hit the ground running with real apples to apples examples versus just a textual description.

I can concede that maybe some things can be excerpted more aggressively and places where I listed the two common ways for "A" Compose concept that map to "B" Flutter implementation might be reduced to one. If you are proposing to cut out the Kotlin side of a section totally, it might be better to eliminate the section altogether. Eg The google fonts section could be excised totally with just a pointer to the recently updated typography page.

jwill added 2 commits October 4, 2024 20:12

added new compose specific page

b15cdd0

added links from the legacy android page to compose version

Update android-devs.md

79ae3ff

jwill added 2 commits October 4, 2024 21:09

Update compose-devs.md

93f76ee

Merge branch 'main' into for-compose-devs

49b238a

sfshaza2 mentioned this pull request Oct 9, 2024

Adds "Launching a Compose activity" article #11219

Merged

4 tasks

Merge branch 'main' into for-compose-devs

c86364b

sfshaza2 reviewed Oct 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create a "Flutter for Jetpack Compose developers" page #11232

Create a "Flutter for Jetpack Compose developers" page #11232

jwill commented Oct 5, 2024 •

edited by parlough

Loading

flutter-website-bot commented Oct 5, 2024 •

edited

Loading

sfshaza2 commented Oct 9, 2024

jwill commented Oct 9, 2024 •

edited

Loading

sfshaza2 left a comment

sfshaza2 Oct 8, 2024

sfshaza2 Oct 8, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

sfshaza2 Oct 11, 2024

jwill commented Oct 11, 2024 •

edited

Loading

		If you instead have experience building apps for Android with Views (XML),
		see [Flutter for Android developers][].

	Howeverm if you are coming from Jetpack Compose,
	However, if you are coming from Jetpack Compose,

	see [Flutter for Jetpack Compose devs][] for more information about Jetpack Compose
	check out [Flutter for Jetpack Compose devs][] for detailed information about Jetpack Compose

	This document can be used as a cookbook by jumping around
	This document can be used as a reference by jumping around

	attributes or construct `TextStyle` object to set many at once.
	attributes or construct a `TextStyle` object to set many at once.

	the `colors` property. If left unmodified, they will
	the `colors` property. If left unmodified, they

Create a "Flutter for Jetpack Compose developers" page #11232

Are you sure you want to change the base?

Create a "Flutter for Jetpack Compose developers" page #11232

Conversation

jwill commented Oct 5, 2024 • edited by parlough Loading

Presubmit checklist

flutter-website-bot commented Oct 5, 2024 • edited Loading

sfshaza2 commented Oct 9, 2024

jwill commented Oct 9, 2024 • edited Loading

sfshaza2 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwill commented Oct 11, 2024 • edited Loading

jwill commented Oct 5, 2024 •

edited by parlough

Loading

flutter-website-bot commented Oct 5, 2024 •

edited

Loading

jwill commented Oct 9, 2024 •

edited

Loading

jwill commented Oct 11, 2024 •

edited

Loading