{"id":29811,"date":"2023-07-09T17:50:41","date_gmt":"2023-07-09T14:20:41","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/flutter-project-building-threads-ui-using-flutter-47f3\/"},"modified":"2023-07-09T17:50:41","modified_gmt":"2023-07-09T14:20:41","slug":"flutter-project-building-threads-ui-using-flutter-47f3","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/flutter-project-building-threads-ui-using-flutter-47f3\/","title":{"rendered":"\u067e\u0631\u0648\u0698\u0647 Flutter: \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc Threads \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Flutter"},"content":{"rendered":"
\n

\u0646\u062a\u0627\u06cc\u062c :<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

\u062a\u0645\u0627\u0634\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648<\/p>\n

https:\/\/www.youtube.com\/watch?v=nXbLgN6LwSI<\/a>
\n<\/iframe>\n<\/p>\n

\u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img1<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img2<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img3<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img4<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img5<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img6<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img7<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img8<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

img9<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

\u0641\u0627\u06cc\u0644 \u0647\u0627<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

pubspec.yaml<\/p>\n

\n
name: testapp\ndescription: A new Flutter project.\n# The following line prevents the package from being accidentally published to\n# pub.dev using `flutter pub publish`. This is preferred for private packages.\npublish_to: \"none\" # Remove this line if you wish to publish to pub.dev\n\n# The following defines the version and build number for your application.\n# A version number is three numbers separated by dots, like 1.2.43\n# followed by an optional build number separated by a +.\n# Both the version and the builder number may be overridden in flutter\n# build by specifying --build-name and --build-number, respectively.\n# In Android, build-name is used as versionName while build-number used as versionCode.\n# Read more about Android versioning at https:\/\/developer.android.com\/studio\/publish\/versioning\n# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.\n# Read more about iOS versioning at\n# https:\/\/developer.apple.com\/library\/archive\/documentation\/General\/Reference\/InfoPlistKeyReference\/Articles\/CoreFoundationKeys.html\n# In Windows, build-name is used as the major, minor, and patch parts\n# of the product and file versions while build-number is used as the build suffix.\nversion: 1.0.0+1\n\nenvironment:\n  sdk: \">=2.19.0 <3.0.0\"\n\n# Dependencies specify other packages that your package needs in order to work.\n# To automatically upgrade your package dependencies to the latest versions\n# consider running `flutter pub upgrade --major-versions`. Alternatively,\n# dependencies can be manually updated by changing the version numbers below to\n# the latest version available on pub.dev. To see which dependencies have newer\n# versions available, run `flutter pub outdated`.\ndependencies:\n  flutter:\n    sdk: flutter\n\n  # The following adds the Cupertino Icons font to your application.\n  # Use with the CupertinoIcons class for iOS style icons.\n  cupertino_icons: ^1.0.2\n  animated_notch_bottom_bar: ^1.0.0\n  buttons_tabbar: ^1.3.6\n\ndev_dependencies:\n  flutter_test:\n    sdk: flutter\n\n  # The \"flutter_lints\" package below contains a set of recommended lints to\n  # encourage good coding practices. The lint set provided by the package is\n  # activated in the `analysis_options.yaml` file located at the root of your\n  # package. See that file for information about deactivating specific lint\n  # rules and activating additional ones.\n  flutter_lints: ^2.0.0\n\n# For information on the generic Dart part of this file, see the\n# following page: https:\/\/dart.dev\/tools\/pub\/pubspec\n\n# The following section is specific to Flutter packages.\nflutter:\n  # The following line ensures that the Material Icons font is\n  # included with your application, so that you can use the icons in\n  # the material Icons class.\n  uses-material-design: true\n\n  # To add assets to your application, add an assets section, like this:\n  assets:\n    - assets\/\n\n  # An image asset can refer to one or more resolution-specific \"variants\", see\n  # https:\/\/flutter.dev\/assets-and-images\/#resolution-aware\n\n  # For details regarding adding assets from package dependencies, see\n  # https:\/\/flutter.dev\/assets-and-images\/#from-packages\n\n  # To add custom fonts to your application, add a fonts section here,\n  # in this \"flutter\" section. Each entry in this list should have a\n  # \"family\" key with the font family name, and a \"fonts\" key with a\n  # list giving the asset and other descriptors for the font. For\n  # example:\n  # fonts:\n  #   - family: Schyler\n  #     fonts:\n  #       - asset: fonts\/Schyler-Regular.ttf\n  #       - asset: fonts\/Schyler-Italic.ttf\n  #         style: italic\n  #   - family: Trajan Pro\n  #     fonts:\n  #       - asset: fonts\/TrajanPro.ttf\n  #       - asset: fonts\/TrajanPro_Bold.ttf\n  #         weight: 700\n  #\n  # For details regarding fonts from package dependencies,\n  # see https:\/\/flutter.dev\/custom-fonts\/#from-packages\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0635\u0644\u06cc.\u062f\u0627\u0631\u062a<\/p>\n
\n
import 'package:flutter\/material.dart';\nimport 'package:testapp\/landing_page.dart';\n\nimport 'home_page.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  \/\/ This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Flutter Demo',\n      theme: ThemeData(\n        \/\/ This is the theme of your application.\n        \/\/\n        \/\/ Try running your application with \"flutter run\". You'll see the\n        \/\/ application has a blue toolbar. Then, without quitting the app, try\n        \/\/ changing the primarySwatch below to Colors.green and then invoke\n        \/\/ \"hot reload\" (press \"r\" in the console where you ran \"flutter run\",\n        \/\/ or simply save your changes to \"hot reload\" in a Flutter IDE).\n        \/\/ Notice that the counter didn't reset back to zero; the application\n        \/\/ is not restarted.\n        primarySwatch: Colors.blue,\n      ),\n      debugShowCheckedModeBanner: false,\n      home: LandingPage(),\n    );\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
landing_page.dart<\/p>\n
\n
import 'package:flutter\/material.dart';\nimport 'package:testapp\/home_page.dart';\n\nclass LandingPage extends StatefulWidget {\n  const LandingPage({super.key});\n\n  @override\n  State<LandingPage> createState() => _LandingPageState();\n}\n\nclass _LandingPageState extends State<LandingPage> {\n  @override\n  Widget build(BuildContext context) {\n    double height = MediaQuery.of(context).size.height;\n    double width = MediaQuery.of(context).size.width;\n    return Scaffold(\n      body: Column(\n        children: [\n          Image.asset(\n            'assets\/img1.png',\n            height: height * 0.75,\n            width: width,\n          ),\n          SizedBox(\n            height: 20,\n          ),\n          InkWell(\n            onTap: () {\n              Navigator.of(context)\n                  .push(MaterialPageRoute(builder: (context) => HomePage()));\n            },\n            child: Container(\n              padding: EdgeInsets.all(20),\n              height: 78,\n              width: 380,\n              decoration: BoxDecoration(\n                color: Colors.white,\n                borderRadius: BorderRadius.circular(10),\n              ),\n              child: Row(\n                mainAxisAlignment: MainAxisAlignment.spaceBetween,\n                children: [\n                  Column(\n                    crossAxisAlignment: CrossAxisAlignment.start,\n                    children: [\n                      Text(\n                        'Log In With Instagram',\n                        style: TextStyle(\n                          color: Colors.black54,\n                        ),\n                      ),\n                      Row(\n                        children: [\n                          Text(\n                            'zuck',\n                            style: TextStyle(\n                              fontWeight: FontWeight.bold,\n                            ),\n                          ),\n                          SizedBox(\n                            width: 5,\n                          ),\n                          Image.asset(\n                            'assets\/img2.png',\n                            height: 13,\n                            width: 13,\n                          ),\n                        ],\n                      ),\n                    ],\n                  ),\n                  Image.asset('assets\/img3.png'),\n                ],\n              ),\n            ),\n          ),\n          SizedBox(\n            height: 15,\n          ),\n          Center(\n            child: Text(\n              'Switch Account',\n              style: TextStyle(\n                color: Colors.black38,\n              ),\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
home_page.dart<\/p>\n
\n
import 'package:flutter\/material.dart';\n\nclass HomePage extends StatefulWidget {\n  const HomePage({super.key});\n\n  @override\n  State<HomePage> createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> {\n  @override\n  Widget build(BuildContext context) {\n    double height = MediaQuery.of(context).size.height;\n    double width = MediaQuery.of(context).size.width;\n    return Scaffold(\n      body: Column(\n        children: [\n          Container(\n            height: height * 0.8,\n            decoration: BoxDecoration(\n              image: DecorationImage(\n                image: AssetImage(\"assets\/img4.png\"),\n                fit: BoxFit.cover,\n              ),\n            ),\n            child: Column(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: [\n                Center(\n                  child: Container(\n                    decoration: BoxDecoration(\n                      color: Colors.white,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    padding: EdgeInsets.all(20),\n                    height: 250,\n                    width: 329,\n                    child: Column(\n                      children: [\n                        Row(\n                          mainAxisAlignment: MainAxisAlignment.spaceBetween,\n                          children: [\n                            Row(\n                              children: [\n                                CircleAvatar(\n                                  backgroundImage:\n                                      AssetImage('assets\/img5.jpg'),\n                                ),\n                                SizedBox(\n                                  width: 15,\n                                ),\n                                Text(\n                                  'zuck',\n                                  style: TextStyle(\n                                    fontWeight: FontWeight.bold,\n                                  ),\n                                ),\n                                SizedBox(\n                                  width: 5,\n                                ),\n                                Image.asset(\n                                  'assets\/img2.png',\n                                  height: 13,\n                                  width: 13,\n                                ),\n                              ],\n                            ),\n                            Image.asset(\n                              'assets\/img6.png',\n                              height: 20,\n                              width: 20,\n                            ),\n                          ],\n                        ),\n                        SizedBox(\n                          height: 10,\n                        ),\n                        Row(\n                          children: [\n                            SizedBox(\n                              width: 8,\n                            ),\n                            Container(\n                              height: 110,\n                              child: VerticalDivider(\n                                color: Colors.black38,\n                                thickness: 1,\n                              ),\n                            ),\n                            Column(\n                              crossAxisAlignment: CrossAxisAlignment.start,\n                              children: [\n                                Text('Let\\'s do this. Welcome to Threads. \ud83d\udd25'),\n                                SizedBox(\n                                  width: width * 0.6,\n                                  child: Text(\n                                    'The visison for Threads is to create an open and friendly public space for conversation.',\n                                    style: TextStyle(),\n                                  ),\n                                ),\n                                SizedBox(\n                                  height: 10,\n                                ),\n                                Row(\n                                  children: [\n                                    IconButton(\n                                      onPressed: () {},\n                                      icon: Icon(\n                                        Icons.favorite_border,\n                                      ),\n                                    ),\n                                    IconButton(\n                                      onPressed: () {},\n                                      icon: ImageIcon(\n                                        AssetImage(\"assets\/img9.png\"),\n                                        size: 24,\n                                      ),\n                                    ),\n                                    IconButton(\n                                      onPressed: () {},\n                                      icon: ImageIcon(\n                                        AssetImage(\"assets\/img7.png\"),\n                                        size: 24,\n                                      ),\n                                    ),\n                                    IconButton(\n                                      onPressed: () {},\n                                      icon: ImageIcon(\n                                        AssetImage(\"assets\/img8.png\"),\n                                        size: 24,\n                                      ),\n                                    ),\n                                  ],\n                                )\n                              ],\n                            ),\n                          ],\n                        ),\n                      ],\n                    ),\n                  ),\n                ),\n                SizedBox(\n                  height: 10,\n                ),\n                Text(\n                  'via Threads',\n                  style: TextStyle(\n                    fontWeight: FontWeight.bold,\n                  ),\n                ),\n              ],\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
\u0646\u062a\u0627\u06cc\u062c : \u062a\u0645\u0627\u0634\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc img1 img2 img3 img4 img5 img6 img7 img8 img9 \u0641\u0627\u06cc\u0644 \u0647\u0627 pubspec.yaml name: testapp description: A new Flutter project. # The following line prevents the package from being accidentally published to # pub.dev using `flutter pub publish`. This is preferred for private packages. publish_to: “none” # Remove this line …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-29811","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=29811"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29811\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=29811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=29811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=29811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}