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

During studying flutter, I learned a beautiful and simple grid system. These interesting and simple grid view layout topics I would like to share you today.

Ever created with a multiple layout with multiple rows within a column?

Try a GridView! While there are multiple GridView constructors, the most common way to create a GridView is the count constructor.

GridView.count(
..
..
)

Start by listing all the items you want in the grid,

GridView.count(
children: [allItems],
)

but it doesn’t end there, control how many items you want to across the grid, by setting the crossAxisCount property.

GridView.count(
crossAxisCount: 1,
children: [allItems],
)

Setting it to 1 makes it look like a normal list. And if your items want to some social distancing? Use mainAxisSpacing gives horizontal space between the rows and crossAxisSpacing provides vertical space between the columns.

GridView.count(
mainAxisSpacing: 28.0,
crossAxisCount: 2,
children: [allItems],
)

Now Let’s make simple grid view using GridView.count constructor.

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text("He'd have you all unravel at the"),
      color: Colors.teal[100],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Heed not the rabble'),
      color: Colors.teal[200],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Sound of screams but the'),
      color: Colors.teal[300],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Who scream'),
      color: Colors.teal[400],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution is coming...'),
      color: Colors.teal[500],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution, they...'),
      color: Colors.teal[600],
    ),
  ],
)

The result is!

By Ami

Tweet

今回はsourcetree/githubの認証エラーの対処方法をシェアします。

Tweet

I wrote about setting up our severless project and deploying to the AWS last week. Today I will talk about invoking our functions and creating endpoints as I mentioned before. So lets get straight to it.

Function Invoking

Lets invoke our function which means execution of the serverless function. In invoking function, we can invoke either locally or cloud way.

Invoking locally

Go to your project root directory and run this command which invoke our function locally before submitting to the cloud.

sls invoke local --function hello

This will call to hello function and give a response like this.

Invoking Cloud (Cloud execution)

sls invoke --function hello

This will also invoke our function but not from our local code. This will hit our function hello from the cloud and give us a response.

Creating Endpoints

Lets create a simple endpoints first before we tweak a bit more later. Remember the endpoint will be hit up when a specific event will come up which is the main concept of serverless (Event). So if we want to create an endpoint , we also need to create an event.

Go to serverless.yml and find the functions parts and we will add an event and endpoint like this. Please be careful about the indentations as the yml file is sensitive.

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: sample-endpoint
          method: GET

We added an endpoint called sample-endpoint which is a GET method type and we have linked our endpoint with the hello function. Now lets deploy our project again.

sls deploy

As a result , we will get a response like this.

You will see that we get an URL under the endpoints section which is the main response result of our function hello. Lets copy that URL and paste it in browser.

Voila ! Our endpoint works successfully. That is all for this week. I will be talking about tweaking our endpoint a bit more in next week.

Thanks for reading. Yuuma

Tweet

先週6月24日にMicrosoft社がWindows10の次期バージョン「Windows11」の発表をおこないました。
今回はWindows11の発表内容で気になった点や感想などをシェアしたいと思います。

Tweet

I talked about setting up IAM user and creating credentials on our computer. Today I will talk about creating our serverless project and start deploying to AWS cloud.

If you haven’t read part 1 , feel free to check it out here. So lets get started.

First lets build a folder, I will call it sls-api but you can name it whatever you want. Then lets go to our project , sls-api in my case and type this.

sls create --template aws-nodejs

This means we will create a node js project template for our serverless application. I told you we are going to use node js for this series in article1. After running this command , we will get an output.

We will have to update the code configuration before deploying. Open serverless.yml which is the core configuration file of our serverless project. We will add a stage and region to connect with our AWS like this

But be aware of the region of AWS. If the regions don’t match, the deployment will not work. Then Type sls deploy and wait for the result. This will start deploying our application to AWS cloud and create the necessary things.

As a result , our deployment will create a stack and lambda at AWS. As you see here, you have to know about AWS services a bit to understand these tutorial series because you are seeing stack and lambda etc. So If you don’t understand AWS, I recommend to read some articles about these services as we are focusing only on the serverless at the moment.

Firstly it will create a stack. A stack is a collection of AWS resources that you can manage as a single unit. In other words, you can create, update, or delete a collection of resources by creating, updating, or deleting stacks.Lets go and checkout on AWS stack console what the deployment build.

The name called sls-api is our project name and dev is the environment which we used to deploy our project. Furthermore, it will also create a lambda function. Lambda is a compute service that lets you run code without provisioning or managing servers. Lets go to Lambda console and you will get a function like this.

That is all for this week. I will talk about invoking our functions and creating endpoints in our project next week.

Yuuma

Tweet