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

今回の記事ではFlutter のSegmentControl作成するの方法を ステップバイステップで共有します。

今の記事では、CupertinoSlidingSegmentedControlをenum型にしたものを表示しています。

navigationBarから変更した時onValueChangedは、現在のStatefulWidgetの状態をenumの値によって変更するようにします。
まずはSky.midnightをデフォルトの色になるようにします。

Sky _selectedSegment = Sky.midnight; 

enum Sky { midnight, viridian, cerulean }

Map<Sky, Color> skyColors = <Sky, Color>{
  Sky.midnight: const Color(0xff8000ff),
  Sky.viridian: const Color(0xff40826d),
  Sky.cerulean: const Color(0xff007ba7),
};

return CupertinoPageScaffold(
      backgroundColor: skyColors[_selectedSegment],
      navigationBar: CupertinoNavigationBar(
        onValueChanged: (Sky? value) {
            if (value != null) {
              setState(() {
                _selectedSegment = value;
              });
            }
          },
//...
 ),
);

navigationBarのthumbColorやgroupValueは、現在選択されているSegmentControlを表示しています。

navigationBar: CupertinoNavigationBar(
        middle: CupertinoSlidingSegmentedControl<Sky>(
          backgroundColor: CupertinoColors.activeOrange,
          thumbColor: skyColors[_selectedSegment]!,
           groupValue: _selectedSegment,
        ),
      ),

navigationBarで表示したいWidgetリスト

children: const <Sky, Widget>{
            Sky.midnight: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                'Midnight',
                style: TextStyle(color: CupertinoColors.white),
              ),
            ),
            Sky.viridian: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                'Viridian',
                style: TextStyle(color: CupertinoColors.white),
              ),
            ),
            Sky.cerulean: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                'Cerulean',
                style: TextStyle(color: CupertinoColors.white),
              ),
            ),
          },

Segment Controlによって表示したいテスト

Center(
        child: Text(
          'Selected Segment: ${_selectedSegment.name}',
          style: const TextStyle(color: CupertinoColors.white),
        ),
      ),

結果は以下のようになります。

参考記事

https://api.flutter.dev/flutter/cupertino/CupertinoSlidingSegmentedControl-class.html

金曜担当 – Ami

Tweet

Twitter has announced that Tweet view counts are now available on iOS and Android, and will soon be available on the web.

The feature allows you to see how many times someone has seen your or someone else’s tweet.

As you use the app, you will now see a view counter along with the number of comments, retweets and likes. According to Twitter’s FAQ, not all tweets display a view count. Data is not available for Community Tweets, Twitter Circles Tweets, and “Older” Tweets.

When Musk announced the feature on December 1, he hinted that he was trying to make the platform’s text and image posts look like video posts, which already had a public view count. He also said that it’s meant to show how “alive” the platform is, and that just looking at the responses and likes doesn’t give you the complete picture.

Adding more publicly visible information to a social network actually goes against what other companies have been doing recently. Last year, Instagram and Facebook began allowing users to hide the number of likes their posts get, a feature it had been testing for years. Even YouTube, whose public view counts have been a defining feature of the platform, began hiding some information: In 2021, it hid public dislike counts, making it only creators who could see how many people had clicked the button, thumbs down on your videos.

Yuuma

Tweet

今回はさまざまなプログラミング言語やツールで活用できる正規表現の基礎文法を紹介します。
本記事は前回の「正規表現基礎(1)」の続きです。

Tweet

今回はさまざまなプログラミング言語やツールで活用できる正規表現の基礎文法を紹介します。

Tweet

Today, I would like to share about useful VS Code extensions for Node JS. Let’s take a look at the following lists. They are mostly for Node JS and some are generally useful extensions.

1. npm Intellisense

2. ESLint

3. Code Spell Checker

4. Auto Close Tag

5. DotENV

6. Prettier – Code formatter

7. JavaScript (ES6) code snippets

8. Better comments

9. Path Intellisense

10. MarkdownLint

This is all for now. Hope you enjoy that.

By Asahi

Tweet