開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

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.

Firstly I create images asset folders from the app directory named with assets. Like this :

project_name/assets/images/your_image.jpg

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 file.

Let’s starting coding in main.dart file. In our widget, we call Profile page named with profile_page.dart. You can also use other file name.

  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            primarySwatch: Colors.blue,

        ),
        home: ProfilePage()
    );
  }

In our ProfilePage for appbar, inside the scaffold widget I create Row 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.

        child: Row(
          children: <Widget>[
            leading : GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Icon(Icons.arrow_back),
        ),
            Spacer(),
            trailing : Text(
          "SELECT",
          style: actionMenuStyle,
        ),
          ],
        ),

And for display Super Liked Me text and other design, I create one Column widget inside the body. For display Super Liked Me text, We can use Text Widget inside a Padding widget.

         Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              "Super Liked Me",
              style: headingTextStyle.copyWith(color: Colors.black),
            ),
          )

The next design for beautiful Search box, we can use TextField widget inside a Card Widget. If you do rounded search bar, we can use inside RoundedRectangleBorder widget with properties BorerRadius.circular(30) widget.

          Card(
            elevation: 4,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: TextField(
                decoration: InputDecoration(
                    border: InputBorder.none,
                    prefixIcon: Icon(Icons.search),
                    hintText: "Search",
                    hintStyle: whiteSubHeadingTextStyle.copyWith(color: hintTextColor)),
              ),
            ),
          )

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 widget again. Inside the Row widget , we can use three Text Widgets. Like this:

 Row(
   children: <Widget>[
     Text("Super likes",...),          
        Text("5",..),      
        Spacer(),
         Text("1h",..),
     ],
    )

The last thing to display a list design , we can use ListView.builder widget. If you want to scrolling the listview, we can use Expanded , that will wrap ListView.builder widget. For display the item look like a card, we can use Card Widget inside ListView.builder widget.Inside a Card widget to display subtitle, we can use ListTitle widget with subtitle property. Inside the card the first thing wanted to display item is used leading property and for the last item trailing property. And we need to add itemCount: 10 property for how many list item will display. This example is item count for 10 times.

 Expanded(
   child: ListView.builder(
      itemBuilder: (context, index) {
         return Card(
           child: ListTile(
             title: Text(.....),
               subtitle: Row(...),
               leading: ClipOval(...),
               trailing: SizedBox(...),
                ),
               );
             },
      itemCount: 10,
            ),
          ),

Hope you enjoyed this article.

By Ami

Tweet

開発/検証環境を手軽に構築するためにはXamppの導入は有効ですが、Xamppに含まれるDBが本番サーバーのDBと異なる場合、同じものにあわせて検証をおこなう必要があります。
今回は本番サーバーのDBがMySQLと仮定して、Xamppに含まれているMariaDBをMySQLに置き換える方法をシェアしたいと思います。
本記事は前回の「XamppのMariaDBをMySQLに置き換える方法(1)」の続きです。

Tweet

What is flutter turtle? This is a simple presentation of turtle graphics for flutter. It can simply apply to draw graphics with a custom painter like a logo language.

Flutter turtle is two classes, named with TurtleView and AnimatedTurtleView. To create a turtleView, both of classes require commands parameter. If you want your logo to repeat 5 times and forward 100 , right 200. You can use like this using commands parameter.

[
  Repeat((_) => 5, [
    Forward((_) => 100),
    Right((_) => 200),
  ]),
];

With more information about flutter turtle, check on flutter pub.dev.

Example code :

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('TurtleView'),
      centerTitle: true,
      elevation: 0,
    ),
    body: TurtleView(
      child: Container(),
      commands: [
        PenDown(),
        SetColor((_) => const Color(0xFF006EFF)),
        SetStrokeWidth((_) => 2),
        Repeat((_) => 20, [
          Repeat((_) => 180, [
            Forward((_) => 25.0),
            Right((_) => 20),
          ]),
          Right((_) => 18),
        ]),
        PenUp(),
      ],
    ),
  );
}

Hop you enjoyed this article!

By Ami

Tweet

開発/検証環境を手軽に構築するためにはXamppの導入は有効ですが、Xamppに含まれるDBが本番サーバーのDBと異なる場合、同じものにあわせて検証をおこなう必要があります。
今回は本番サーバーのDBがMySQLと仮定して、Xamppに含まれているMariaDBをMySQLに置き換える方法をシェアしたいと思います。

Tweet

Output:

This week I would like to share about navigation drawer from Drawer widget. We can create navigation drawer by calling the constructor of the drawer class. Drawer widgets show us navigation drawer that slides to horizontally from edge fo the screen.

When we tap app bar, it will display the drawer. In this article we will create DrawerSection and eight navigation links. The links Dashboard, Contacts, Events, Notes, Settings, Notifications, Privacy policy and Send feedback are created using Column widget. Let’s design the drawer part first. I am creating drawer widget named MyDrawerList. And I am creating other drawer in a separate file so that we can reuse it in other pages.

Basic implementation of navigation drawer:

MyDrawerList(
        child:Column(

         children: [
             menuItem(1, "Dashboard", Icons.dashboard_outlined,
              currentPage == DrawerSections.dashboard ? true : false),
             
              menuItem(2, "Contacts", Icons.people_alt_outlined,
              currentPage == DrawerSections.contacts ? true : false),
etc..

          ],
        ) ,
   ),

At first dashboard page is wanted to see, we can assign currentPage to DrawerSection.dashboard.

var currentPage = DrawerSections.dashboard;

To display a navigation drawer we have to provide Drawer widget to scaffold’s drawer property.

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green[700],
        title: const Text("Navigation drawer"),
      ),
      body: container,
      drawer: Drawer(
        child: SingleChildScrollView(
          child: Column(
            children: [
              const MyHeaderDrawer(),
              MyDrawerList(),
            ],
          ),
        ),
      ),
    );

If you want to navigate to another route first we have to dismiss the drawer by using below line of code

 Navigator.pop(context);

Now we have to navigate to another route using menuItem like below, in above we assign current page to dashboard page and menuItem widget is called in MyDrawerList widget.

Widget menuItem(int id, String title, IconData icon, bool selected) {
    return Material(
      color: selected ? Colors.grey[300] : Colors.transparent,
      child: InkWell(
        onTap: () {
          Navigator.pop(context);
          setState(() {
            if (id == 1) {
              currentPage = DrawerSections.dashboard;
            }
        }
etc..
}

Hope you enjoyed this post.

By Ami

Tweet