{"id":10789,"date":"2021-10-22T10:00:00","date_gmt":"2021-10-22T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10789"},"modified":"2021-10-21T19:30:31","modified_gmt":"2021-10-21T10:30:31","slug":"lets-learn-flutter-ui-with-me","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10789","title":{"rendered":"Let’s learn flutter UI with me"},"content":{"rendered":"\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

For this week, I will create only user interface design for android app using flutter. In this article I will explain deeply the usage of widget and we can learn a lot of flutter widget and how to clearly create folder structures etc.<\/p>\n\n\n\n

Firstly I create images asset folders from the app directory named with assets<\/strong>. Like this :<\/p>\n\n\n\n

project_name\/assets\/images\/your_image.jpg<\/code><\/pre>\n\n\n\n
After inserting images in assets folder, we will need to apply this image to our app. So  we have to put images assets in pubspec.yaml<\/strong> file. <\/p>\n\n\n\n
Let’s starting coding in main.dart file. In our widget, we call Profile page named with profile_page.dart<\/strong>. You can also use other file name. <\/p>\n\n\n\n
  Widget build(BuildContext context) {\n    return MaterialApp(\n        title: 'Flutter Demo',\n        debugShowCheckedModeBanner: false,\n        theme: ThemeData(\n            primarySwatch: Colors.blue,\n\n        ),\n        home: ProfilePage()\n    );\n  }<\/code><\/pre>\n\n\n\n
In our ProfilePage<\/strong> for appbar, inside the scaffold<\/strong> widget I create Row<\/strong> widget with leading and trailing, leading is that will display back button and trailing is that will display SELECT text in right side of the screen of the one row.<\/p>\n\n\n\n
        child: Row(\n          children: <Widget>[\n            leading : GestureDetector(\n          onTap: () {\n            Navigator.of(context).pop();\n          },\n          child: Icon(Icons.arrow_back),\n        ),\n            Spacer(),\n            trailing : Text(\n          \"SELECT\",\n          style: actionMenuStyle,\n        ),\n          ],\n        ),<\/code><\/pre>\n\n\n\n
And for display Super Liked Me<\/strong> text and other design, I create one Column<\/strong> widget inside the body<\/strong>. For display Super Liked Me<\/strong> text, We can use Text<\/strong> Widget inside a Padding<\/strong> widget. <\/p>\n\n\n\n
         Padding(\n            padding: const EdgeInsets.all(16),\n            child: Text(\n              \"Super Liked Me\",\n              style: headingTextStyle.copyWith(color: Colors.black),\n            ),\n          )<\/code><\/pre>\n\n\n\n
The next design for beautiful Search<\/strong> box, we can use TextField<\/strong> widget inside a Card<\/strong> Widget. If you do rounded search bar, we can use inside RoundedRectangleBorder<\/strong> widget with properties BorerRadius.circular(30)<\/strong> widget.<\/p>\n\n\n\n
          Card(\n            elevation: 4,\n            shape: RoundedRectangleBorder(\n              borderRadius: BorderRadius.circular(16),\n            ),\n            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),\n            child: Padding(\n              padding: const EdgeInsets.symmetric(horizontal: 8),\n              child: TextField(\n                decoration: InputDecoration(\n                    border: InputBorder.none,\n                    prefixIcon: Icon(Icons.search),\n                    hintText: \"Search\",\n                    hintStyle: whiteSubHeadingTextStyle.copyWith(color: hintTextColor)),\n              ),\n            ),\n          )<\/code><\/pre>\n\n\n\n
And another design from the left side of Super Likes Text , the center of 5 text and the last text of 1h, to display this we can use Row<\/strong> widget again. Inside the Row widget , we can use three<\/strong> Text<\/strong> Widgets. Like this:<\/p>\n\n\n\n
 Row(\n   children: <Widget>[\n     Text(\"Super likes\",...),          \n        Text(\"5\",..),      \n        Spacer(),\n         Text(\"1h\",..),\n     ],\n    )<\/code><\/pre>\n\n\n\n
The last thing to display a list design , we can use ListView.builder<\/strong> widget. If you want to scrolling the listview, we can use Expanded<\/strong> , that will wrap ListView.builder<\/strong> widget. For display the item look like a card, we can use Card<\/strong> Widget inside ListView.builder widget.<\/strong>Inside a Card<\/strong> widget to display subtitle, we can use ListTitle<\/strong> widget with subtitle<\/strong> property. Inside the card the first thing wanted to display item is used leading<\/strong> property and for the last item trailing<\/strong> property. And we need to add itemCount: 10<\/strong> property for how many list item will display. This example is item count for 10 times.<\/p>\n\n\n\n
 Expanded(\n   child: ListView.builder(\n      itemBuilder: (context, index) {\n         return Card(\n           child: ListTile(\n             title: Text(.....),\n               subtitle: Row(...),\n               leading: ClipOval(...),\n               trailing: SizedBox(...),\n                ),\n               );\n             },\n      itemCount: 10,\n            ),\n          ),<\/code><\/pre>\n\n\n\n
Hope you enjoyed this article.<\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>